Autocomplete Textbox Example javascript实现自动完成成功


Posted in Javascript onAugust 17, 2007
<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>
Javascript 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
如何用js控制css中的float的代码
Aug 16 #Javascript
javascript 函数式编程
Aug 16 #Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 #Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 #Javascript
用javascript实现给图片加链接
Aug 15 #Javascript
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 #Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
tab栏切换原理
2017/03/22 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
大学生就业求职信
2014/06/12 职场文书
博士生专家推荐信
2015/03/25 职场文书
药品开票员岗位职责
2015/04/15 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
《坐井观天》教学反思
2016/02/18 职场文书