JS中Select下拉列表类(支持输入模糊查询)功能


Posted in Javascript onJanuary 17, 2017

下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示:

<span style="font-size:14px;">  <HTML>    
  <HEAD>    
  <META http-equiv='Content-Type' content='text/html; charset=gb2312'>    
  <TITLE>可输入的下拉框</TITLE>    
  </HEAD>    
  <BODY >    
   <Script Language="Javascript">  
  var j = 0;  
  function SelectValue(obj)  
  {  
    var input = obj.parentNode.nextSibling;  
    document.all.box2.value = obj.options[obj.selectedIndex].text;  
    document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;  
    alert(document.getElementById("txtSection").value);  
  }  
  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>  
   <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">  
     <TR>   
     <TD width="24%"><font face="Arial" size="2">Section</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 value='ALL' Selected>ALL</OPTION>  
  <OPTION value='0TEST1'>0TEST1 = Testing 1  
  <OPTION value='0TEST1'>0TEST2 = Testing 1  
  <OPTION value='0TEST1'>0TEST3 = Testing 1  
  <OPTION value='SECTION'>SECTION = Section Description XXXXX AAA  
  </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="0" >    
  <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>  
  <p>  
  </BODY>
</HTML>  
</span>

以上所述是小编给大家介绍的JS中Select下拉列表类(支持输入模糊查询)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS图片无缝、平滑滚动代码
Mar 11 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
深入理解javascript中的 “this”
Jan 17 #Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 #Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 #Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 #Javascript
You might like
php Smarty模板生成html文档的方法
2010/04/12 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php for 循环使用的简单实例
2016/06/02 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
分页栏的web标准实现
2011/11/01 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
基于Vue.js的表格分页组件
2016/05/22 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python求素数示例分享
2014/02/16 Python
Python中的自定义函数学习笔记
2014/09/23 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers