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 相关文章推荐
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
微信小程序实现录音功能
Nov 22 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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
电信专业应届生自荐信
2013/09/28 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
情侣吵架检讨书
2014/02/05 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
师德师风个人整改措施
2014/10/27 职场文书
入党函调证明材料
2014/12/24 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
MySQL 开窗函数
2022/02/15 MySQL