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 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript中length属性的探索
Jul 31 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
canvas绘制的直线动画
Jan 23 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 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 闭包特性在实际应用中的问题
2009/10/30 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
node.js基础知识小结
2018/02/26 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python实现自主查询实时天气
2018/06/22 Python
django 环境变量配置过程详解
2019/08/06 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python实现磁盘日志清理的示例
2020/11/05 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
委托书范本
2014/04/02 职场文书
法制宣传日活动总结
2014/04/29 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery