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 相关文章推荐
JavaScript网页定位详解
Jan 13 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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 二级分类代码和模版循环例子
2011/06/16 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php常用图片处理类
2016/03/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
javascript 构建模块化开发过程解析
2019/09/11 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
详解JS函数防抖
2020/06/05 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
wxPython实现画图板
2020/08/27 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
企业整改报告范文
2014/11/08 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
会计岗位工作总结
2015/08/12 职场文书
python - asyncio异步编程
2021/04/06 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
详解Python函数print用法
2021/06/18 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS