JS代碼

<script type="text/javascript">
$(document).bind('click', function(e) {
     var e = e || window.event; //瀏覽器兼容性     
     var elem = e.target || e.srcElement;
     while(elem) { //循環(huán)判斷至跟節(jié)點(diǎn)膳音，防止點(diǎn)擊的是div子元素     
         if(elem.id && (elem.id == 'title' || elem.id == "result")) {
           return;
         }
         elem = elem.parentNode;
    }
    $('#result').css('display', 'none'); //點(diǎn)擊的不是div或其子元素     
});
function changeF(this_) {
    $("#title").val($(this_).find("option:selected").text());
    $("#result").css({
        "display": "none"
    });
}
function setfocus(this_) {
    $("#result").css({
        "display": ""
        });
}
function setinput(this_) {
    $.post("repair_order_statistics!getTitleInfo.action", {
        title: $("#title").val()
            },
            function(data) {
                var select = $("#result");
                select.html("");
                var jsonObj = eval("(" + data + ")");
                for(i = 0; i < jsonObj.data.length; i++) {
                    var option = $("<option></option>").text(jsonObj.data[i]);
                            select.append(option);
                }
            });
}
</script>

頁面代碼

<label class="textStyle">標(biāo)題:</label>
<input id="title" style="width:200px" class="easyui-text" name="title" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="請(qǐng)輸入標(biāo)題" />
<select name="result" id="result" size="10" onchange="changeF(this)" class="list" style="display:none;"></select>

上面是工作時(shí)我運(yùn)用的代碼幔妨，接下來是網(wǎng)上大神發(fā)的domo
JS代碼

var TempArr=[];//存儲(chǔ)option  
$(function(){  
    /*先將數(shù)據(jù)存入數(shù)組*/  
    $("#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) { //循環(huán)判斷至跟節(jié)點(diǎn)衡楞，防止點(diǎn)擊的是div子元素     
            if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {    
                return;    
            }    
            elem = elem.parentNode;    
        }    
        $('#typenum').css('display', 'none'); //點(diǎn)擊的不是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);  
    }   
}
function setinput(this_){  
    var select = $("#typenum");  
    select.html("");  
    for(i=0;i<TempArr.length;i++){  
        //若找到以txt的內(nèi)容開頭的客税，添option  
        if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){  
            var option = $("<option></option>").text(TempArr[i]);  
            select.append(option);  
        }  
    }  
}  

頁面代碼

<span class="second">  
    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="請(qǐng)選擇或輸入"/>  
    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">  
        <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>  
    </select>  
</span> 

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;   
}