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 常用功能总结
Mar 18 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
thinkphp中memcache的用法实例
2014/11/29 PHP
php如何连接sql server
2015/10/16 PHP
Yii快速入门经典教程
2015/12/28 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
详解js类型判断
2018/05/22 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python列表解析配合if else的方法
2018/06/23 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
django云端留言板实例详解
2019/07/22 Python
新加坡交友网站:be2新加坡
2019/04/10 全球购物
2014年会策划方案
2014/05/11 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
新学期开学寄语2016
2015/12/04 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
MySQL索引是啥?不懂就问
2021/07/21 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS