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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
深入理解javascript中的this
Feb 08 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php ajax 静态分页过程形式
2011/09/02 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
js实现批量删除功能
2020/08/27 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
Java面试笔试题大全
2016/11/23 面试题
高中生期末评语大全
2014/01/28 职场文书
商场促销活动方案
2014/02/08 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
小型婚礼主持词
2015/06/30 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis