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入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Layui Table js 模拟选中checkbox的例子
Sep 03 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的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
别名指示符是什么
2012/10/08 面试题
年会活动策划方案
2014/01/23 职场文书
道路交通安全实施方案
2014/03/12 职场文书
活动总结模板大全
2015/05/11 职场文书
反邪教教育心得体会
2016/01/15 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
DIY胆机必读:各国电子管评价
2022/04/06 无线电
JS setTimeout与setInterval的区别
2022/04/20 Javascript
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技