下拉可进行模糊查询

效果图：

1、无默认值

 2、可进行输入模糊查询

 

3、不进行查询可直接点击右侧部分整个下拉出现

 

                    <div class="form-in">
                        <label class="control-label long">
                            地区名称：
                        </label>
                        <div class="long b" style="position: relative;">
                            <%-- 引用下拉模糊查询（具体使用时可以调整width、height、top的值,适应自己的项目） --%>

                            <%-- 输入框（页面显示）：输入、下拉模糊查询--%>
                            <asp:TextBox ID="txtDropDownInput" runat="server" onfocus="this.select();InputValue(this)" Style="z-index: 1; position: absolute; top: 2px; width: 200px; height: 30px;" onkeyup="InputValue(this)" onblur="NoOnblur()"></asp:TextBox>
                            <%-- 原下拉组件（页面隐藏）：后台绑定数据源 --%>
                            <asp:DropDownList ID="ddl_Bank_Name" runat="server" Style="position: relative; top: 0; height: 19px; width: 260px;" onclick="SelectValue(this)" onchange="SelectValue(this)" OnSelectedIndexChanged="bankChange" AutoPostBack="true"></asp:DropDownList>
                            <div id="selectLikeDiv" style="border: 1px solid #FFFFFF; white-space: nowrap; overflow: hidden; position: absolute; display: block; top: 25px;"></div>
                            <%-- 存储下拉选择的值 --%>
                            <input type="hidden" name="txtSection" id="txtSection" />
                        </div>
                    </div>

      /**********************************************/
   //DropDownList下拉选择实现模糊查询的JS

   var txtDropDownInputId = "<%=txtDropDownInput.ClientID %>";//使用时修改 
   var dropDownListAspId = "<%=ddl_Bank_Name.ClientID %>";//使用时修改 
    
   var j = 0;
   function SelectValue(obj) {
       var input = obj.parentNode.nextSibling;
       document.getElementById(txtDropDownInputId).value = obj.options[obj.selectedIndex].text;
       document.getElementById("txtSection").value = obj.options[obj.selectedIndex].value;
   }
   //输入触发事件
   function InputValue(obj) {
       var n = 1;
       var tmpObj;
       var src = document.getElementById(dropDownListAspId);
       var selectLikeDiv = document.all.selectLikeDiv;
       if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
           if (obj.value != "") {
               selectLikeDiv.style.display = "";
               selectLikeDiv.innerHTML = "";
               if (selectLikeDiv.hasChildNodes()) {
                   selectLikeDiv.childNodes[0].parentNode.removeChild(selectLikeDiv.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;
                   selText.style.backgroundColor = '#ffffff';
                   selText.style.color = '#000000';

                   if (src[i].text.toLowerCase().indexOf(obj.value.toLowerCase()) > -1) {
                       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.getElementById(txtDropDownInputId).value = this.innerHTML;
                           selectLikeDiv.style.display = "none";
                           document.getElementById("txtSection").value = this.value;
                           set_select_checked(dropDownListAspId, this.value);

                           setTimeout('__doPostBack(\'ctl00$MainContent$cboCashBank\',\'\')', 0);//如果DropDownList 使用了AutoPostBack="true"，就要使用这块（可以在页面中F12查看到代码，粘贴过来即可）
                       }
                       selectLikeDiv.appendChild(selText);
                       n++;
                   }
                  
               }
           }
           else {
               document.all.selectLikeDiv.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.getElementById(txtDropDownInputId).value = tmpObj.innerHTML;
               selectLikeDiv.style.display = "none";
               document.getElementById("txtSection").value = tmpObj.value;
           }
       }
   }

   function SelMatch(src) {
       var currSel = document.getElementById(txtDropDownInputId).value;
       for (var i = 0; i < src.length; i++) {
           if (src[i].text == currSel) {
               src.options[i].selected = true;
           }
       }
   }
   
   //失去焦点执行事件
   function NoOnblur() {
       //加延时处理，才能实现
       setTimeout(function () { OnblurSelectLikeDiv(); }, 100);
   }

   function OnblurSelectLikeDiv() {
       if (document.activeElement.id == "selectLikeDiv") {
           return false;
       } else {
           document.all.selectLikeDiv.style.display = 'none';
       }
   }



   function set_select_checked(selectId, checkValue) {
       var select = document.getElementById(selectId);

       for (var i = 0; i < select.options.length; i++) {
           if (select.options[i].value == checkValue) {
               select.options[i].selected = true;
               break;
           }
       }
   } 

   /**********************************************/

  var dt =数据库数据；
         
      foreach (DataRow dr in dt.Rows)
      {
          dropDownList.Items.Add(new ListItem(dr["name"].ToString(), dr["code"].ToString()));
      }