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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
Laravel多域名下字段验证的方法
2019/04/04 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python虚拟环境项目实例
2017/11/20 Python
Python模块WSGI使用详解
2018/02/02 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
心得体会开头
2014/01/01 职场文书
表决心的诗句大全
2014/03/11 职场文书
六年级学生评语
2014/04/22 职场文书
安全生产演讲稿
2014/05/09 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
教师工作证明范本
2015/06/12 职场文书