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 相关文章推荐
js的event详解。
Sep 06 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
使用jQuery实现购物车
Oct 29 jQuery
如何用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常用代码大全(新手入门必备)
2010/06/29 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery等待效果示例
2014/05/01 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python中requests模块的使用方法
2015/04/08 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python实现按行分割文件
2019/07/22 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
企业宣传工作方案
2014/06/02 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
入党介绍人意见2015
2015/06/01 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android