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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
原生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+Html+缓存
2006/12/20 PHP
php实现的SESSION类
2014/12/02 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
js实现分页功能
2017/05/24 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Angular4学习笔记router的简单使用
2018/03/30 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python中tab键是什么意思
2020/06/18 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
司机职责范本
2014/03/08 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
员工辞职信怎么写
2015/02/27 职场文书
教师节主题班会教案
2015/08/17 职场文书
情感电台广播稿
2015/08/18 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
go类型转换及与C的类型转换方式
2021/05/05 Golang
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Java中的Kotlin 内部类原理
2022/06/16 Java/Android