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.

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List