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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
JS中min函数实例讲解
Feb 18 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue实现页面切换滑动效果
Jun 29 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基础知识回顾
2012/08/16 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
使用 JavaScript 制作页面效果
2021/04/21 Javascript