JavaScript Tutorial/GUI Components/Autocomplete Textbox
Autocomplete Textbox Example
<source lang="javascript">
/*------------------------------------------------------------------------------
* JavaScript Library * Version 1.0 * by Nicholas C. Zakas, http://www.nczonline.net/ * Copyright (c) 2004-2005 Nicholas C. Zakas. All Rights Reserved. * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation; either version 2.1 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA *------------------------------------------------------------------------------ */
<html> <head>
<title>Autocomplete Textbox Example</title>
<script type="text/javascript">
var isOpera = navigator.userAgent.indexOf("Opera") > -1; var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera; var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera; function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
} function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
} function autocompleteMatch (sText, arrValues) {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
return arrValues[i];
}
}
return null;
} function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}
</script>
<script>
var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
</script>
</head> <body>
Autocomplete Textbox Example
Type in a color in lowercase:
<input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" />
</body> </html></source>
