Autocomplete Textbox Example javascript實現(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自動完成 的使用方法實例
- jQuery.Autocomplete實現(xiàn)自動完成功能(詳解)
- jQuery Autocomplete自動完成插件
- jquery autocomplete自動完成插件的的使用方法
- jQuery UI AutoComplete 自動完成使用小記
- jQuery 插件autocomplete自動完成應(yīng)用(自動補全)(asp.net后臺)
- JS實現(xiàn)的一個簡單的Autocomplete自動完成例子
- 基于bootstrap插件實現(xiàn)autocomplete自動完成表單
相關(guān)文章
創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
這篇文章主要介紹了創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScrpt中如何使用 cookie 設(shè)置查看與刪除功能
這篇文章主要介紹了JavaScrpt中使用 cookie 設(shè)置查看與刪除功能的方法,文中通過實例代碼給大家介紹了js cookie常用的3個預(yù)設(shè)函數(shù)庫,需要的朋友可以參考下2017-07-07
JavaScript實現(xiàn)找出字符串中第一個不重復(fù)的字符
這篇文章主要介紹了JavaScript實現(xiàn)找出字符串中第一個不重復(fù)的字符的方法,需要的朋友可以參考下2014-09-09
用javascript實現(xiàn)div可編輯的常見方法
用javascript實現(xiàn)div可編輯的常見方法...2007-10-10
javascript 不用reverse實現(xiàn)字符串反轉(zhuǎn)的代碼
javascript 不用reverse實現(xiàn)字符串反轉(zhuǎn)的代碼,需要的朋友可以參考下。2010-03-03

