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 日期对象Date扩展方法
May 30 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript中的一些实用小技巧总结
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的五种设计模式
2012/09/05 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python 实现集合Set的示例
2020/12/21 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
PHP笔试题
2012/02/22 面试题
高中毕业自我鉴定
2013/12/19 职场文书
社区中秋节活动方案
2014/01/29 职场文书
《三峡》教学反思
2014/03/01 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
规划编制实施方案
2014/03/15 职场文书
大二学习计划书范文
2014/04/27 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书