Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功
更新時(shí)間: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:輸入一個(gè)以小寫字母開頭的顏色(英文單詞,比如:r、 b等)<BR><INPUT id=txt1 onkeyup="return autocomplete(this, event, arrValues)"></P>
您可能感興趣的文章:
- JS 自動(dòng)完成 AutoComplete(Ajax 查詢)
- jquery自動(dòng)完成插件(autocomplete)應(yīng)用之PHP版
- Jquery AutoComplete自動(dòng)完成 的使用方法實(shí)例
- jQuery.Autocomplete實(shí)現(xiàn)自動(dòng)完成功能(詳解)
- jQuery Autocomplete自動(dòng)完成插件
- jquery autocomplete自動(dòng)完成插件的的使用方法
- jQuery UI AutoComplete 自動(dòng)完成使用小記
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- JS實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的Autocomplete自動(dòng)完成例子
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
相關(guān)文章
JS去除字符串的空格增強(qiáng)版(可以去除中間的空格)
之前發(fā)了不少了去除字符串空格的代碼,但都是去除開始與結(jié)尾的,下面的這段代碼可以去除中間的。2009-08-08
創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
這篇文章主要介紹了創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScrpt中如何使用 cookie 設(shè)置查看與刪除功能
這篇文章主要介紹了JavaScrpt中使用 cookie 設(shè)置查看與刪除功能的方法,文中通過實(shí)例代碼給大家介紹了js cookie常用的3個(gè)預(yù)設(shè)函數(shù)庫(kù),需要的朋友可以參考下2017-07-07
JavaScript實(shí)現(xiàn)找出字符串中第一個(gè)不重復(fù)的字符
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找出字符串中第一個(gè)不重復(fù)的字符的方法,需要的朋友可以參考下2014-09-09
用javascript實(shí)現(xiàn)div可編輯的常見方法
用javascript實(shí)現(xiàn)div可編輯的常見方法...2007-10-10
JavaScript設(shè)計(jì)模式之適配器模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之適配器模式介紹,適配器模式,一般是為要使用的接口,不符本應(yīng)用或本系統(tǒng)使用,而需引入的中間適配層類或?qū)ο蟮那闆r,需要的朋友可以參考下2014-12-12
javascript 不用reverse實(shí)現(xiàn)字符串反轉(zhuǎn)的代碼
javascript 不用reverse實(shí)現(xiàn)字符串反轉(zhuǎn)的代碼,需要的朋友可以參考下。2010-03-03
Typescript協(xié)變與逆變簡(jiǎn)單理解
深入學(xué)習(xí)TypeScript類型系統(tǒng)的話,逆變、協(xié)變、雙向協(xié)變、不變是繞不過去的概念。這些概念看起來挺高大上的,其實(shí)并不復(fù)雜,這篇文章我們就來學(xué)習(xí)下協(xié)變和逆變吧2022-10-10

