CreateWebApp.com › Tutorial

Tutorial

Last updated on October, 2009.

Here you are going to learn how to use our autocomplete tool. Begin with a simple webpage which takes an employee ID.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head></head>
	<body>
		<form>
			<input type="text" name="empID" />
			<input type="submit"/>		
		</form>	
	</body>
</html>

(DOCTYPE can make a different on Internet Explorer, so keep it by default.)

Users usualy like to find employees by name, but the back-end program takes ID as input. You need to make a bridge to connect them, this is usually autocomplete used for.

You link a script and a stylesheet (in <head>), add a name field, and then initialize an autocomplete object after the text field (so the field can be found on runtime).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>	
		<script src="/scripts/autocomplete.js" type="text/javascript"></script>
		<link rel="stylesheet" href="/stylesheets/autocomplete.css" type="text/css" />
	</head>
	<body>
		
		<form>
			<input type="hidden" name="empID" />
			<input type="text" name="empName" />			
			<input type="submit"/>		
		</form>	
		
		<script>
			new Autocomplete("empName", function() {
				return "completeEmpNames.php?q=" + this.value;
			});
		</script>
		
	</body>
</html>

The initialize code has two arguments:

A string used to find the text field, as its name and id attribute.
A function returns URLs to be request. Inside the function, this.value refers to the user typed string, which is encoded by encodeURIComponent().

Therefore if "g n" is typed, then soon later the server receives a request to "completeEmpNames.php?q=g%20n", then the server output the suggestion list. The list is a plain HTML file that:

Place suggestion items inside <li> </li>.
Set onSelect event for <li >.

Here is an sample server output:

<li onselect="this.setText('Gad Narwekar')">
	Gad Narwekar
</li>
<li onselect="this.setText('Gad Naumovich')">
	Gad Naumovich
</li>
... ...

If the list has more than 10 lines, it will be scrollable. (See the right picture.)

Users may use the Up Arrow and Down Arrow keys to move the highlight bar, or use the Page Down and Page Up keys to skip multiple lines, then press Enter or click to select an item. Then onSelect invoked, and the text field updated by setText(). You often need to update more than this field, just write it in JavaScript. For example:

this.setText('Gad Narwekar'); document.getElementsByName("empID")[0].value = '47676'

This code just works. But as the list has many rows, thus duplication of document.getElementsByName("empID")[0].value cost more bandwidth and download time. As JavaScript is a prototype-based language, which you can extend a setValue() method to the object at runtime to clean this up. For example:

<script>
	new Autocomplete("empName", function() {

		this.setValue = function( newValue ){
			document.getElementsByName("empID")[0].value = newValue;
		};
		
		return "completeEmpNames.php?q=" + this.value;
	});
</script>

Thus the onSelect can be shorten to:

this.setText('Gad Narwekar'); this.setValue('47676');

And as setText() returns the this pointer, it can be even shorter:

this.setText('Gad Narwekar').setValue('47676');

Note: If your text contains ' or " and need help on nested quotation escape, see this page on wikipedia. (The link opens a new window.)

Just one more thing!

So far, the hidden field empID only gets updated on item selection, therefore modify the name field but don't select anything makes the empID out of date. For example, both fields has up-to-date values, then the user delete employee name to empty, but empID still holds the old value. So you need to reset ID whenever employee name is modified.

<script>
	new Autocomplete("empName", function() {
	
		this.setValue = function( newValue ){
			document.getElementsByName("empID")[0].value = newValue;
		};
		
		if (this.isModified)
			this.setValue("");
		
		return "completeEmpNames.php?q=" + this.value;
	});
</script>

You have finished this and ready to start your own!

The trial contains an example PHP file, go to the download page to get it.

If you need pagination.

If you need two columns suggestion list.