How do I implement a simple textbox autocomplete?

In this example, we will implement an auto-complete such that whenever the user types an 'n' or 'N' , the text box is autocompleted with "No Email". The idea for this implementation has been obtained from JavaScript Toolbox.

The following example demonstrates the code at work.



Take the text box for your form that you want to add auto-complete for. Add an onKeyUp event and call the function autoComplete, passing the parameter this, which refers to the current textbox. This eleminates the need to perform a getElementById.

After this, the HTML for the input box should look some thing like:

<input name="dEmail" type="text" id="dEmail" onKeyUp="autoComplete(this)">

Next add the following JavaScript function.

<script language="JavaScript">
<!--
function autoComplete(theObj){
	var tempSt = theObj.value;	
	var r1 = theObj.createTextRange();
	var oldVal = r1.text;
	
	var dVal = theObj.value;
	if(dVal.length == 1){
		if(dVal =="n" || dVal =="N"){
			theObj.value = "No Email";
			var rNew = theObj.createTextRange();
			rNew.moveStart('character',oldVal.length);
			rNew.select();
		}	
	}
}
-->
</script>

What you could do if you wanted to have different autocomplete for different text boxes would be to pass the default string into the function when you define onKeyUp event for the input textbox as

<input name="dEmail" type="text" id="dEmail" onKeyUp="autoComplete(this,'Some String')">

You could also pass the first character needed for the autocomplete to be triggered as well.

<input name="dEmail" type="text" id="dEmail" 
onKeyUp="autoComplete(this,'Some String','t')">

The definition of the function then becomes function autoComplete(theObj,CompletionString,firstChar')

Then perform a case conversion

if(dFirstChar.toUpperCase == firstChar.toUpperCase() )

for the first character.

About the Author

The author is a contract software developer who has been developing web application for the last 2 years. He also focuses on using ajax and javascript to replicate as much user interactive that can be found on desktop application. You can visit his page here

JavaScript FAQ

 

Advertisement

Free Magazine