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 实现??打印?理
Apr 28 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
php xml 入门学习资料
2011/01/01 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JS编程小常识很有用
2012/11/26 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python之mock模块基本使用方法详解
2019/06/27 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
如何进行Linux分区优化
2013/02/12 面试题
英语系本科生个人求职信
2013/09/21 职场文书
司法建议书范文
2014/05/13 职场文书
自书遗嘱范文
2015/08/07 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis