asp:DropDownList 实现下拉框模糊查询(内容详细，粘贴可用)

asp:DropDownList 实现下拉框模糊查询(内容详细，粘贴可用)

DropDownList 控件通过JS代码实现下拉框模糊查询功能，希望能帮到你！

aspx 页面代码

  <%-- 引用下拉模糊查询（具体使用时可以调整width、height、top的值,适应自己的项目） --%>
  <div style="position: relative;">
    <%-- 输入框（页面显示）：输入、下拉模糊查询--%>
    <asp:TextBox ID="txtDropDownInput" runat="server" onfocus="this.select();InputValue(this)" Style="z-index:1;position:absolute;top:0px;width:278px;height:13px;" onkeyup="InputValue(this)" onblur="NoOnblur()"></asp:TextBox>
    <%-- 原下拉组件（页面隐藏）：后台绑定数据源 --%>
    <asp:DropDownList ID="cboCashBank" runat="server" Style="position:relative;top:0;height:19px;width:300px;" onclick="SelectValue(this)" onchange="SelectValue(this)" OnSelectedIndexChanged="cboCashBank_SelectedIndexChanged" AutoPostBack="true">
    </asp:DropDownList>

  	<div id="selectLikeDiv" style="border: 1px solid black;white-space:nowrap;overflow:hidden;position:absolute;display:none;top:19px;"></div>

    <%-- 存储下拉选择的值 --%>
    <input type="hidden" name="txtSection" id="txtSection" />
  </div>

js模块代码

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

        var txtDropDownInputId = "<%=txtDropDownInput.ClientID %>";//使用时修改
        var dropDownListAspId = "<%=cboCashBank.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;
                }
            }
        } 

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