Auto suggest with Twitter typeahead
Twitter's typeahead JQuery plugin provides excellent auto suggest functionality that you can use on text boxes. It transforms a rudimentary lookup facility into a very useful search tool. There's a great example on the project homepage...
Getting Started
I did find it a bit confusing to get started with the control. There is a lot of documentation and some good examples, but I couldn't quite find what I wanted to do. Stackoverflow to the rescue:
Looking through the basic example, the function substringMatcher does the work that I thought typeahead did. That's because...
"the source of a dataset is responsible for computing a set of suggestions for a given query"
This is where the Bloodhound engine comes in. Bloodhound is a suggestion engine which does the heavy lifting. typeahead.js is a JQuery plugin for the UI, whereas the Bloodhound suggestion engine is used to prefetch data, provide caching and backfilling.
You can get the latest version (0.11.1 at the time of writing) from the project homepage.
So the baseurl is a setting in the web.config (StatesApiUrl) which points to an controller action that returns all the states of america. The typeahead control is the same html as the typeahead examples.
Turns out there's a bug with typeahead in version 0.11.1 and you can read full details and how to correct it in Issue 1218 Remote Completion. If you review this commit, you can see the changes that I made to fix this bug.
You can get the latest version (0.11.1 at the time of writing) from the project homepage.
Simple Example
After playing around with the examples and the StackOverflow example, I eventually arrived at the following example code, which is also deployed to this sample site, and the full code is on github.So the baseurl is a setting in the web.config (StatesApiUrl) which points to an controller action that returns all the states of america. The typeahead control is the same html as the typeahead examples.
Typeahead Bug
There was some random behavior with the typeahead plugin, it didn't seem to work. If I typed "w" I only got Washington back, not the four entries that there should be. And when I typed an "o" I got two results back, but not Oregon for some reason!Turns out there's a bug with typeahead in version 0.11.1 and you can read full details and how to correct it in Issue 1218 Remote Completion. If you review this commit, you can see the changes that I made to fix this bug.
