首位查询

<span class="second">  
    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/>  
    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">  
        <option value="">a124</option>
        <option value="">b123</option>
        <option value="">c123</option>
        <option value="">d123</option>
        <option value="">e123</option>
        <option value="">f123</option>
        <option value="">g123</option>
        <option value="">h123</option>
        <option value="">i123</option>
        <option value="">g123</option>
        <option value="">k123</option>
        <option value="">l123</option>
        <option value="">m123</option>
    </select>  
</span>  


<script type="text/javascript">
        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_) {  
            $(this_).prev("input").val($(this_).find("option:selected").text());  
            $("#typenum").css({"display":"none"});  
        }  
        function setfocus(this_){  
            $("#typenum").css({"display":""});  
            var select = $("#typenum");  
            for(i=0;i<TempArr.length;i++){  
                var option = $("<option></option>").text(TempArr[i]);  
                select.append(option);  
            }
            setinput(this_);   
        }  

        function setinput(this_){  
            var select = $("#typenum");  
            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></option>").text(TempArr[i]);  
                    select.append(option);  
                }  
            }  
        }  
</script>

模糊查询

<span class="second">  
    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/>  
    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">  
        <option value="">a124</option>
        <option value="">b123</option>
        <option value="">c123</option>
        <option value="">d123</option>
        <option value="">e123</option>
        <option value="">f123</option>
        <option value="">g123</option>
        <option value="">h123</option>
        <option value="">i123</option>
        <option value="">g123</option>
        <option value="">k123</option>
        <option value="">l123</option>
        <option value="">m123</option>
    </select>  
</span>  


<script type="text/javascript">
        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_) {  
            $(this_).prev("input").val($(this_).find("option:selected").text());  
            $("#typenum").css({"display":"none"});  
        }  
        function setfocus(this_){  
            $("#typenum").css({"display":""});  
            var select = $("#typenum");  
            for(i=0;i<TempArr.length;i++){  
                var option = $("<option></option>").text(TempArr[i]);  
                select.append(option);  
            }
            setinput(this_);   
        }  

        function setinput(this_){  
            var select = $("#typenum");  
            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></option>").text(TempArr[i]);  
                    select.append(option);  
                }  
            }  
        }  
</script>