纯JQ编写select可输入模糊查询

css样式

.second select {
width: 11%;
height: 106px;
margin: 0px;
outline: none;
border: 1px solid #999;
margin-top: 31px;}
.second input {
width: 167px;
top: 9px;
outline: none;
border: 0pt;
position: absolute;
line-height: 30px;
left: 8px;
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;
/* left: 15px; */
margin-left: -40px;
font-family: 微软雅黑;
padding-left: 4px;
}
.blue { 
background:#1e91ff; 
}
复制代码

html

   <span class="second" style="position: absolute;">
       <input type="text"autocomplete="off"name="makeupCo"id="makeupCo"class="makeinp" placeholder="请选择或输入" />
       <select name="makeupCoSe"id="typenum"size="10"tyle="display:none;"data-field="table"data-type="required"></select>
   </span>
复制代码

JQ

<script src="http://code.jquery.com/jquery-latest.js"></script>
var TempArr=[
];
//     $(function(){
//     /*先将数据存入数组*/
//     // $("#typenum option").each(function(index, el) {
//     //     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 == 'typenum' || elem.id == "makeupCo")) {  
//                 return;  
//             }  
//             elem = elem.parentNode;  
//         }  
//         $('#typenum').css('display', 'none'); //点击的不是div或其子元素   
//     });  
// })
 
   $("#typenum").on("change",function () {
    $(this).prev("input").val($(this).find("option:selected").text());
    $("#typenum").css({"display":"none"});
})
//input获取焦点
$("#makeupCo").focus(function (){
    $("#typenum").css({"display":"block","position":"absolute","top": "25px","height":"200px","width":"400px"});
    var select = $("#typenum");
    select.html("");
    for(i=0;i<allTable.length;i++){
        var option = $("<option></option>").text(allTable[i]);
        select.append(option);
    } 
})
//模糊查询的关键
$("#makeupCo").bind("input propertychange",function (){
    var select = $("#typenum");
    select.html("");
    select.css({"height":"200px","width":"400px"});
    for(i=0;i<allTable.length;i++){
        //若找到以txt的内容开头的，添option
        if(allTable[i].substring(0,this.value.length).indexOf(this.value)==0){
            var option = $("<option></option>").text(allTable[i]);
            select.append(option);
        }
    }
});复制代码

转载于:https://juejin.im/post/5c2ec17e51882525c712ee7e