JS Select下拉框(支持输入模糊查询)

2024-09-28 07:55:42

本文实例为大家分享了支持输入模糊查询的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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Bootstrap select多选下拉框实现代码

前言项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们  <link rel="stylesheet" href="https://cdnjs.cl
Bootstrap select实现下拉框多选效果

在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-
jquery multiSelect 多选下拉框

$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText
基于jquery的网页SELECT下拉框美化代码

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题. 2.允许多次调用 $("...").selectCss(),以解决Select的options更新后无法同步的问题. 使用方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
js实现可输入可选择的select下拉框

本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="
jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4
select下拉框插件jquery.editable-select详解

项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> <select class="source"> <option value="0">人工导入</option> <option value="1">数据服务平台</option> </select> js代码 $('#noMean').editabl
jquery及原生js获取select下拉框选中的值示例

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法复制代码代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas
angularjs 实现带查找筛选功能的select下拉框实例

一.背景对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele
jquery动态加载select下拉框示例代码

如题,直接上代码,实战学习. 复制代码代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

JS Select下拉框(支持输入模糊查询)

相关推荐

随机推荐