Type(Script)Ahead

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.