JavaScript function: AutoComplete(this, event, arrayname)

AutoComplete Example

AutoComplete(this, event, arrayname)

Start typing in the forms input field and the function will autocomplete the text for you.

Or simply click on the drop down arrow on the side to view all of your possible choices and select the one you want.

The text used to fill in your keystrokes is passed to the function by the javascript array arrayname. You just need to assign values to the array and then pass it's name to the function as part of the onKeyUp event. That is the only arugment that will ever change.

The this and event arguments are there to tell the function which input field from the form is being used and to pass along the keyboard keystrokes to the function. There is no need to ever change them.

<input type="text" id="id1" onKeyUp="AutoComplete(this, event, arrayname)"...

When a user tabs out of the input field the value they entered is validated against the same array by calling the function ValidateAutoComplete(this, arrayname).
If what was entered does not match any entry in the array the user is prompted to enter either a valid value or to blank out the field.

<input type="text" id="id1" onKeyUp="AutoComplete(this, event, arrayname)" onBlur="ValidateAutoComplete(this,arrayname);">

All of the code is stored in an external JS file and can be downloaded by clicking here: http://www.stansight.com/AutoComplete.js