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 相关文章推荐
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
原生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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
浅谈js的异步执行
2016/10/18 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
Python模拟用户登录验证
2017/09/11 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python Tkinter版学生管理系统
2019/02/20 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python实现GIF图倒放
2020/07/16 Python
python如何变换环境
2020/07/21 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
平面设计岗位职责
2013/12/14 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
群众路线党课主持词
2014/04/01 职场文书
员工工作表现评语
2014/04/26 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers