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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
如何用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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python logging类库使用例子
2014/11/22 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python中文竖排显示的方法
2015/07/28 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python多进程并发demo实例解析
2019/12/13 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python 利用zmail库发送邮件
2020/09/11 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
英文自荐信常用句子
2014/03/26 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书