JS Select下拉框(支持输入模糊查询)


Posted in Javascript onFebruary 04, 2017

本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Insert title here</title> 
 <Script Language="Javascript"> 
 
 function SelectValue(obj) 
 { 
 document.all.box2.value = obj.options[obj.selectedIndex].text; 
 } 
 var j = 0; 
 function InputValue(obj) 
 { 
 var n = 1; 
 var tmpObj; 
 var src = document.all.SelectOption; 
 var msg = document.all.msg; 
 if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){ 
 if(obj.value!=""){ 
  msg.style.display=""; 
  msg.innerHTML=""; 
  if(msg.hasChildNodes()) 
  { 
  msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); 
  } 
  
  for (var i=0;i<src.length;i++){ 
  var selValue = document.createElement("div"); 
  var selText = document.createElement("div"); 
  selText.value = src(i).value; 
  selText.innerHTML = src(i).text; 
 
  if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ 
  selText.setAttribute("id","selText"+n); 
  selText.onmouseover=function (){ 
  this.style.backgroundColor='#003399'; 
  this.style.color ='#ffffff'; 
  } 
  selText.onmouseout=function (){ 
  this.style.backgroundColor='#ffffff'; 
  this.style.color ='#000000'; 
  } 
  selText.onclick=function (){ 
  document.all.box2.value = this.innerHTML; 
  msg.style.display="none"; 
  document.getElementById("txtSection").value=this.value; 
  } 
  msg.appendChild(selText); 
  n++; 
  } 
  } 
 } 
 else { 
 document.all.msg.style.display="none"; 
 } 
 } 
 else { 
 //press down key 
 if(event.keyCode==40){ 
 j++; 
 for (var i=0; i<src.length; i++) 
 { 
  tmpObj = document.getElementById("selText"+i); 
  if(tmpObj != null){ 
  tmpObj.style.backgroundColor='#ffffff'; 
  tmpObj.style.color ='#000000'; 
  }  
 } 
 tmpObj = document.getElementById("selText"+j); 
 if(tmpObj != null){ 
  tmpObj.style.backgroundColor='#003399'; 
  tmpObj.style.color ='#ffffff'; 
 }else{ 
  j = 0; 
 } 
 } 
 //press up key 
 if (event.keyCode==38){ 
 j--; 
 for (var i=0; i<src.length; i++) 
 { 
  tmpObj = document.getElementById("selText"+i); 
  if(tmpObj != null){ 
  tmpObj.style.backgroundColor='#ffffff'; 
  tmpObj.style.color ='#000000'; 
  }  
 } 
 tmpObj = document.getElementById("selText"+j); 
 if(tmpObj != null){ 
  tmpObj.style.backgroundColor='#003399'; 
  tmpObj.style.color ='#ffffff'; 
 }else{ 
  j = 2; 
 } 
 } 
 //press enter key 
 if (event.keyCode==13){ 
 tmpObj = document.getElementById("selText"+j); 
 document.all.box2.value = tmpObj.innerHTML; 
 msg.style.display="none"; 
 document.getElementById("txtSection").value=tmpObj.value; 
 } 
 } 
 } 
 
 function SelMatch(src) 
 { 
 var currSel = document.all.box2.value; 
 for (var i=0;i<src.length;i++){ 
 if (src(i).text==currSel) 
 { 
 src.options(i).selected = true; 
 } 
 } 
 } 
 
 function NoMsg() 
 { 
 if(document.activeElement.id=="msg") 
 return false; 
 else 
 document.all.msg.style.display='none'; 
 } 
 
 
 </Script> 
</head> 
<body> 
 
 <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%"> 
 <TR> 
 <TD width="24%"><font face="Arial" size="2">查询</font></TD> 
 <TD COLSPAN=3 width="76%"> 
 
 <div style="position:relative;"> 
 <span style="margin-left:230px;width:18px;overflow:hidden;"> 
  <select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" > 
  <OPTION >ALL</OPTION> 
  <OPTION >管理者1</OPTION> 
  <OPTION >管理者2</OPTION> 
  <OPTION >管理者3</OPTION> 
  <OPTION >业务员3</OPTION> 
  <OPTION >业务员3</OPTION> 
  <OPTION >13</OPTION> 
  <OPTION >103</OPTION> 
  </select> 
  </span> 
  <input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="" > 
  <div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden; 
  width:230px;position:absolute;left:0px;top:20px;display:none"> 
 </div> 
 </div> 
 <Input Type="Hidden" Name="txtSection" id="txtSection"> 
  
 </TD> 
 </TR> 
 </TABLE> 
 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
原生js实现打字动画游戏
Feb 04 #Javascript
js实现自定义路由
Feb 04 #Javascript
jQuery窗口拖动功能的实现代码
Feb 04 #Javascript
简单易懂的天气插件(代码分享)
Feb 04 #Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 #Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 #Javascript
javascript实现复选框全选或反选
Feb 04 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php使用正则验证中文
2016/04/06 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python双向链表原理与实现方法详解
2019/12/03 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
应届生求职信写作技巧
2013/10/24 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
党员个人剖析材料
2014/09/30 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
关于倡议书的范文
2015/04/29 职场文书
追讨欠款律师函
2015/06/24 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android