js 實現select下拉查詢功能

 第一步:在HTML頁面創建一個input和一個select元素

<div>
    <input type="text" style="width:200px" name="makeupCo" id="makeupCo" class="makeinp v_input" onfocus="setfocus(this)" oninput="setinput(this);"   placeholder="請選擇或輸入"/>  </div>  
<div>
	<select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;width:205px">  
		<option value="">1</option>  
		<option value="">2</option>  
		<option value="">12323</option>  
		<option value="">31</option>  
		<option value="">1332</option>  
		<option value="">412</option>  
		<option value="">42</option>  
		<option value="">11</option>  
		<option value="">您好</option>  
	</select> 
</div>

第二步:寫JS 代碼實現通過input查詢select數據

<script>

var TempArr=[];//存儲option  
$(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或其子元素     
    });    
})  
function changeF(this_) {  
    $("#makeupCo").val($(this_).find("option:selected").text());  
    $("#typenum").css({"display":"none"});  
} 
function setfocus(this_){  
    $("#typenum").css({"display":""});  
    var select = $("#typenum");  
    select.html("");
    select.text("");  
    for(i=0;i<TempArr.length;i++){  
        var option = $("<option></option>").text(TempArr[i]);  
        select.append(option);  
    }   
}
function setinput(this_){  
    var select = $("#typenum");  
    select.html("");
    select.text("");  
    for(i=0;i<TempArr.length;i++){  
        //若找到以txt的內容開頭的，添option  
        if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){  
            var option = $("<option></option>").text(TempArr[i]);  
            select.append(option);  
        }  
    }  
}  

</script>

 

 第三步:試試效果吧