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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
给Function做的OOP扩展
May 07 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript每日必学之运算符
Feb 16 Javascript
HTML的select控件美化
Mar 27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
JS实现li标签的删除
Apr 12 Javascript
微信小程序中weui用法解析
Oct 21 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
使用 php4 加速 web 传输
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
js中url对象化管理分析
2017/12/29 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python学习笔记(二)基础语法
2014/06/06 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python实现简易云音乐播放器
2018/01/04 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python3 下载网络图片代码实例
2019/08/27 Python
python超时重新请求解决方案
2019/10/21 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
旷课检讨书3000字
2014/02/04 职场文书
大学生求职计划书
2014/04/30 职场文书
Python 阶乘详解
2021/10/05 Python