可以输入内容，筛选下拉框内容的搜索框 - 沁心园沁心

  <%--培训名称：下拉框绑定以及可以搜索下拉框 --%>  
    <%--<script type="text/javascript"> 
        //存储option
        var TempArrVal = [];//value
        var TempArr = [];//name
        $(function () {
            /*先将数据存入数组*/
            $("#ExamPlanId option").each(function (index, el) {
                TempArrVal[index] = $(this).val();
                TempArr[index] = $(this).text();
            });
            $(document).bind(\'click\', function (e) {
                var e = e || window.event; //浏览器兼容性   
                var elem = e.target || e.srcElement;
                while (elem) { //循环判断至跟节点，防止点击的是div子元素   
                    if (elem.id && (elem.id == \'ExamPlanId\' || elem.id == "makeupCo")) {
                        return;
                    }
                    elem = elem.parentNode;
                }
                $(\'#ExamPlanId\').css(\'display\', \'none\'); //点击的不是div或其子元素   
            });
        });

        function changeF(this_) {
            $(this_).prev("input").val($(this_).find("option:selected").text());
            $("#ExamPlanId").css({ "display": "none" });
        }
        function setfocus(this_) {
            $("#ExamPlanId").css({ "display": "" });
            var select = $("#ExamPlanId");
            for (i = 0; i < TempArr.length; i++) {
                var option = $("<option value=" + TempArrVal[i] + "></option>").text(TempArr[i]);
                select.append(option);
            }
        }

        function setinput(this_) {
            var select = $("#ExamPlanId");
            select.html("");
            for (i = 0; i < TempArr.length; i++) {
                //若找到以txt的内容开头的，添option
                if (TempArr[i].substring(0, this_.value.length).indexOf(this_.value) == 0) {
                    var option = $("<option value=" + TempArrVal[i] + "></option>").text(TempArr[i]);
                    select.append(option);
                }
            }
        };

       
        
    </script>--%>
    <%--<style>
        /*下拉框绑定以及可以搜索下拉框样式*/
        .second select {
            width: 11%;
            height: 106px;
            margin: 0px;
            outline: none;
            border: 1px solid #999;
        }

        .second input {
            width: 167px;
            outline: none;
            border: 0pt;
            position: absolute;
            line-height: 30px;
            height: 30px;
            border: 1px solid #999;
        }

        .second ul {
            position: absolute;
            top: 27px;
            border: 1px solid #999;
            left: 8px;
            width: 125px;
            line-height: 16px;
        }

        .ul li {
            list-style: none;
            width: 161px;
            margin-left: -40px;
            font-family: 微软雅黑;
            padding-left: 4px;
        }

        .blue {
            background: #1e91ff;
        }

        .secondstyle select {
            position: absolute;
            z-index: 50;
            margin-top: 28px;
            width: 200px;
            margin-left: -180px;
        }

        #makeupCo {
            width: 150px;
            height: 20px;
        }
    </style>--%>

　　

 <%-- <th style="padding-left: 30px">培训名称：
                        </th>
                        <td class="style1">
                            <span class="secondstyle">
                                <input type="text" runat="server" name="makeupCo" id="makeupCo" class="makeinp" placeholder="请选择或输入" onfocus="setfocus(this)" oninput="setinput(this);" />
                                <select name="makeupCoSe" runat="server" id="ExamPlanId" style="display: none" onchange="changeF(this)" size="10"></select>
                            </span>
                        </td>--%>