<< Simply being lazy and concurrent | 2017 review >>

Type(Script)Ahead

by dotnetnerd 14. December 2017 07:48

Recently I ran into a task that I had encountered less than a year ago with another client. In both cases the client was using Bootstrap CSS for their grid layout, but didn’t have much need for the Bootstrap JavaScript bits. After a while the need for type ahead functionality arose, so the first time around we agreed to include the Bootstrap JavaScript so we could use the Bootstrap Typeahead plugin.

However having to include jQuery, Bootstrap JavaScript and a plugin, which still required me to make some tweeks to work properly, didn’t sit well with me. So the second time around I opted to implement type ahead on my own. What I wanted was a function that could take a textbox, debounce input into a function and show the results returned from that function as a clickable list that could be navigated using arrow keys.

I am pretty happy with the result, which I think is pretty pretty nice, and easy to extend if needed. Having already needed the functionality with two clients, I decided to create a gist and share it here.

	interface ITypeaheadArgs
	{
	minChars?: number,
	onSelect?: () => void
	}

	async function typeahead(
	field: HTMLInputElement,
	search: (text: string) => Promise<string[]>,
	args: ITypeaheadArgs) {

	let handleKey = (event: KeyboardEvent, keyCode: number,
	eventHandler: (typeahead: HTMLUListElement) => void) => {
	if (event.keyCode === keyCode) {
	event.preventDefault();
	event.stopImmediatePropagation();

	if (field.parentElement) {
	let typeahead = <HTMLUListElement>field.parentElement.querySelector('.js-typeahead');
	if (typeahead) {
	eventHandler(typeahead);
	}
	}
	}
	};

	field.addEventListener('keydown', event => {
	if (event.keyCode === 38 \|\| event.keyCode === 40) {
	event.preventDefault();
	}
	});

	field.addEventListener('keyup', event => {
	if (!field.parentElement) { return; }

	handleKey(event, 38, typeahead => {
	let selected = typeahead.querySelector('.selected');

	if (selected) {
	let prev = selected.previousElementSibling;
	while (prev !== null && prev.nodeType === Node.TEXT_NODE) {
	prev = selected.previousElementSibling;
	}
	if (prev) {
	selected.classList.remove('selected');
	prev.classList.add('selected');
	}
	}
	});

	handleKey(event, 40, typeahead => {
	let selected = typeahead.querySelector('.selected');

	if (selected) {
	let next = selected.nextElementSibling;
	while (next !== null && next.nodeType === Node.TEXT_NODE) {
	next = selected.nextElementSibling;
	}
	if (next) {
	selected.classList.remove('selected');
	next.classList.add('selected');
	}
	} else {
	let first = typeahead.querySelector('li');
	if (first) {
	first.classList.add('selected');
	}
	}
	});

	handleKey(event, 13, typeahead => {
	let selected = typeahead.querySelector('.selected');
	if (selected) {
	field.value = selected.innerHTML;
	typeahead.innerHTML = '';
	if (args.onSelect) {
	args.onSelect();
	}
	}
	});
	});

	field.addEventListener('keyup', debounce(async () => {

	if (field.parentElement) {
	let typeahead =
	<HTMLUListElement>field.parentElement.querySelector('.js-typeahead');

	if (!typeahead) {
	typeahead = document.createElement('ul');
	typeahead.classList.add('js-typeahead')
	if (field.parentNode) {
	field.parentNode.insertBefore(typeahead, field.nextSibling);
	}

	addChildClickListener(typeahead, 'li', e => {
	field.value = e.innerHTML;
	typeahead.innerHTML = '';
	if (args.onSelect) {
	args.onSelect();
	}
	});

	document.body.addEventListener('click', () => typeahead.innerHTML = '');
	}

	if ((!args.minChars
	\|\| field.value.trim().length >= args.minChars) && field.parentElement) {

	let items = await search(field.value);
	if (items) {
	let liReducer =
	(acc: string, val: string): string => acc += `<li>${val}</li>`;
	typeahead.innerHTML = items.reduce(liReducer, '');
	} else {
	typeahead.innerHTML = '';
	}
	} else {
	typeahead.innerHTML = '';
	}
	}
	}, 500));
	}

	function addChildClickListener(node: HTMLElement,
	selector: string, f: (e: HTMLElement) => any) {
	node.addEventListener('click', (e: MouseEvent) => {
	e.preventDefault();
	if(e.srcElement && e.srcElement.matches(selector)) {
	f(<HTMLElement>e.srcElement);
	}
	});
	}

	function debounce(func: () => void, wait = 100) {
	let h: number;
	return () => {
	clearTimeout(h);
	h = setTimeout(() => func(), wait);
	};
	}

	/*
	CSS:
	.js-typeahead {
	z-index: 99;
	position: absolute;
	background-color: white;
	border: solid 1px lightgrey;
	padding: 0;
	list-style-type: none;
	border-top: 0;
	}

	.js-typeahead li {
	padding: 5px;
	cursor: pointer;
	}

	.js-typeahead li.selected {
	background-color: lightblue;
	}
	*/

	// Use like:
	// let element = document.getElementById('myBox');
	// typeahead(element,
	// searchText => await someClient.Startswith(searchText),
	// {minChars: 5, onSelect: () => alert(`${element.value} selected`);})

view raw typeahead.ts hosted with ❤ by GitHub

Tags: typescript, typeahead

Patterns | Snippets

Type(Script)Ahead

Who am I?

Month List

Type(Script)Ahead

Who am I?

Month List

Tag cloud