Developers have become very excited about "autocomplete" dropdowns since Google began using it some years ago. A screenshot is shown below:
Writing your own autocompletion scripts would be a difficult undertaking. And it's unlikely to be worth your while, as there are many such scripts available for free. We will use the Autocomplete widget provided as part of the jQuery UI library. jQuery UI is an interface library - offering a set of interactions, widgets, effects, and utilities - built on top of (and requiring the use of) the jQuery library. You can learn more about jQuery UI at http://jqueryui.com/, and more about jQuery UI Autocomplete at http://jqueryui.com/autocomplete/
To use jQuery UI, we must first include the jQuery library via a script tag, and then include the jQuery UI library, via a script tag as well.
As with jQuery, we can reference jQuery UI either directly - by downloading the library to our local server - or via a content delivery network (CDN). We have downloaded both jQuery and jQuery UI in this case.
The code is shown below:
ready method to attach an
autocomplete to the
source attribute specifies the remote data source: the
AutoComplete response route defined in MoreAjaxApps/Demos/server.js. The route accepts a request parameter
term - the value typed by the user.
AutoComplete response route queries the database:
The double pipes (
||) are concatenation in SQLite (the type of database we use here), building a fullname (and returning it as the computed field
value) for any president whose first or last name matches the user's text.