Autocomplete Textbox Example javascript实现自动完成成功_javascript技巧

复制代码 代码如下:

<script> <BR>var isOpera = navigator.userAgent.indexOf("Opera") > -1; <BR>var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera; <BR>var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera; <BR>function textboxSelect (oTextbox, iStart, iEnd) { <BR> switch(arguments.length) { <BR> case 1: <BR> oTextbox.select(); <BR> break; <BR> case 2: <BR> iEnd = oTextbox.value.length; <BR> /* falls through */ <br><br> case 3: <BR> if (isIE) { <BR> var oRange = oTextbox.createTextRange(); <BR> oRange.moveStart("character", iStart); <BR> oRange.moveEnd("character", -oTextbox.value.length + iEnd); <BR> oRange.select(); <BR> } else if (isMoz){ <BR> oTextbox.setSelectionRange(iStart, iEnd); <BR> } <BR> } <BR> oTextbox.focus(); <BR>} <BR>/* <BR>function textboxReplaceSelect (oTextbox, sText) { <BR> if (isIE) { <BR> var oRange = oTextbox.createTextRange(); <BR> oRange.text = sText; <BR> oRange.collapse(true); <BR> oRange.select(); <BR> } else if (isMoz) { <BR> var iStart = oTextbox.selectionStart; <BR> oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length); <BR> oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length); <BR> } <BR> oTextbox.focus(); <BR>} <BR>*/ <BR>function autocompleteMatch (sText, arrValues) { <BR> for (var i=0; i < arrValues.length; i++) { <BR> if (arrValues[i].indexOf(sText) == 0) { <BR> return arrValues[i]; <BR> } <BR> } <BR> return null; <BR>} <BR>function autocomplete(oTextbox, oEvent, arrValues) { <BR> switch (oEvent.keyCode) { <BR> case 38: //up arrow <BR> case 40: //down arrow <BR> case 37: //left arrow <BR> case 39: //right arrow <BR> case 33: //page up <BR> case 34: //page down <BR> case 36: //home <BR> case 35: //end <BR> case 13: //enter <BR> case 9: //tab <BR> case 27: //esc <BR> case 16: //shift <BR> case 17: //ctrl <BR> case 18: //alt <BR> case 20: //caps lock <BR> case 8: //backspace <BR> case 46: //delete <BR> return true; <BR> break; <BR> default: <BR> // 下面这一行用处不大(被注释) <BR> //textboxReplaceSelect(oTextbox, isIE ? oTextbox.value/*oEvent.keyCode*/ : oEvent.charCode); <BR> var iLen = oTextbox.value.length; <BR> var sMatch = autocompleteMatch(oTextbox.value, arrValues); <BR> if (sMatch != null) { <BR> oTextbox.value = sMatch; <BR> textboxSelect(oTextbox, iLen, oTextbox.value.length); <BR> } <br><br> return false; <BR> } <BR>} <BR> </script>
<script> <BR> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; <BR> </script>

Autocomplete Textbox Example

Type in a color in lowercase:输入一个以小写字母开头的颜色(英文单词，比如：r、 b等)