Auto-Complete Field

Many times in HTML forms, it is necessary to limit input to a few common choices. However, it is necessary to also allow new choices. My work-around is to use an auto-compelte text field. While HTML does not have one, I added the auto-complete functionality to the basic HTML "input type='text'" field. I supply the text field with an array of common values that will auto-complete once the first couple letters are typed. If the user types something not in the list, that is still allowed.

Download

Click Here to download the auto-complete script. The instructions for use are in the script file.

Example

This is an example of the script in action. This text field will autocomplete with common color names. You can type anything you want, but typing the first letter or so of a common word will auto-complete with that word. Try 'brown' for example. Notice that 'b' gives you 'Blue', but if you then type 'r', it changes to 'Brown'. Also, you can type anything, like 'Retro-Green'.

Color:

HTML

The HTML to produce the example above looks like the following. Changes just for this script are in red.

	<script src='./user_files/js/autoComplete.js' language='javascript'></script>
	<form action=''>
	Color: <input type="text"
		onkeydown="javascript:setOldValue(this)"
		onkeyup="javascript:autoComplete(this, new Array('Blue','Brown','Cyan','Green','Magenta','Orange','Red','Yellow'))" />
	</form>