Autocomplete Textbox Example javascript實(shí)現(xiàn)自動完成成功
更新時間:2007年08月17日 17:54:36 作者:
復(fù)制代碼 代碼如下:
<SCRIPT language=JScript 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 = oTextbox.createTextRange();
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, isIE ? oTextbox.value/*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>
<H2>Autocomplete Textbox Example</H2>
<P>Type in a color in lowercase:輸入一個以小寫字母開頭的顏色(英文單詞,比如:r、 b等)<BR><INPUT id=txt1 onkeyup="return autocomplete(this, event, arrValues)"></P>
您可能感興趣的文章:
- JS 自動完成 AutoComplete(Ajax 查詢)
- jquery自動完成插件(autocomplete)應(yīng)用之PHP版
- Jquery AutoComplete自動完成 的使用方法實(shí)例
- jQuery.Autocomplete實(shí)現(xiàn)自動完成功能(詳解)
- jQuery Autocomplete自動完成插件
- jquery autocomplete自動完成插件的的使用方法
- jQuery UI AutoComplete 自動完成使用小記
- jQuery 插件autocomplete自動完成應(yīng)用(自動補(bǔ)全)(asp.net后臺)
- JS實(shí)現(xiàn)的一個簡單的Autocomplete自動完成例子
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動完成表單
相關(guān)文章
js實(shí)現(xiàn)網(wǎng)頁右上角滑出會自動消失大幅廣告的方法
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁右上角滑出會自動消失大幅廣告的方法,是javascript廣告特效的典型應(yīng)用,非常具有實(shí)用價值,需要的朋友可以參考下2015-02-02兼容FireFox 用javascript寫的一個畫圖函數(shù)
兼容FireFox 用javascript寫的一個畫圖函數(shù)...2007-08-08