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 相关文章推荐
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
js图片处理示例代码
May 12 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
pyshp创建shp点文件的方法
2018/12/31 Python
简单了解python PEP的一些知识
2019/07/13 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
简历中个人求职的自我评价模板
2013/11/29 职场文书
车队司机自我鉴定
2014/03/02 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
python中的sys模块和os模块
2022/03/20 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android
如何基于python实现单目三维重建详解
2022/06/25 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技