Autocompletion

Contact Us or call 1-877-932-8228
Autocompletion

Autocompletion

Developers have become very excited about "autocomplete" dropdowns since Google began using it some years ago. A screenshot is shown below:Google Auto Complete

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.

Usually, we also include several stylesheets along with the jQuery UI JavaScript library; these stylesheets (one for the basic structure of jQuery UI widgets and elements, and one for the visual design of the elements) can also be downloaded or referenced from a CDN. We have, as with the JavaScript libraries, downloaded the files to our server.

The code is shown below:

Code Sample:

MoreAjaxApps/Demos/AutoComplete.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AutoComplete</title>
<link rel="stylesheet" type="text/css" href="AutoComplete.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.min.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.min.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#President").autocomplete({
			source: "AutoComplete",
			minLength: 2,
			select: function(event, ui) {
				alert("Selected: " + ui.item.value + " with ID#" + ui.item.id);
			}
		});
	});
</script>
</head>
<body>
<form>
	<input type="text" size="40" name="President" id="President">
</form>
</body>
</html>

After including the needed CSS and JavaScript files, we use jQuery's ready method to attach an autocomplete to the <div> with id President.

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.

The AutoComplete response route queries the database:

"SELECT PresidentID as id, FirstName || ' ' || LastName as value FROM Presidents WHERE FirstName LIKE '%" + President + "%' OR LastName LIKE '%" + President + "%'";

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.

Many JavaScript frameworks, including jQuery, YUI and GWT, provide similar built-in autocompleters.

Next