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+xml技术实现分页浏览
Jul 27 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
js数组的基本使用总结
Jan 18 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
层叠菜单的动态生成
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
document.createElement()用法
2013/03/13 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
完善的jquery处理机制
2016/02/21 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Cpy和Python的效率对比
2015/03/20 Python
Python中的类与对象之描述符详解
2015/03/27 Python
Python中的变量和作用域详解
2016/07/13 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
django model通过字典更新数据实例
2020/04/01 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
李培根演讲稿
2014/05/22 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python实现高效的遗传算法
2021/04/07 Python
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP