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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
js自制图片放大镜功能
Jan 24 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
Angular 容器部署的方法
Apr 17 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
ES6中Promise的使用方法实例总结
Feb 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
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python正则表达式指南 推荐
2018/10/09 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python SVM 线性分类模型的实现
2019/07/19 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
介绍一下Linux中的链接
2016/05/28 面试题
影视广告专业求职信
2014/09/02 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
公积金具结保证书
2015/05/11 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL