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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
jQuery事件委托代码实践详解
Jun 21 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
php使用curl发送json格式数据实例
2013/12/17 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python实现贪吃蛇双人大战
2020/04/18 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
护理工作感言
2014/01/16 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
2015年党性分析材料
2014/12/19 职场文书
民政局未婚证明
2015/06/15 职场文书
狂人日记读书笔记
2015/06/30 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python