由于select下拉框數(shù)據(jù)量較大，查找起來費時費力威鹿，可模糊查詢成為迫切需求，本著用戶體驗至上的原則轨香，用input框模擬可搜索的下拉框忽你。
考慮到不能頻繁向后臺請求數(shù)據(jù)，這里默認數(shù)據(jù)是通過ajax一次獲取的臂容，然后前端篩選展示匹配的結果科雳。

效果圖：

篩選前.png

篩選后.png

html結構：

<div class="select-content">
    <input type="hidden" name="newMachineId">
    <input type="text" name="select_input" id="select_input" class="select-input" value="" autocomplete="off" placeholder="請輸入城市名" />
    <div class="sanjiao">
        <span class="item dot-bottom"></span>
    </div>
    <div id="search_select" class="search-select">
        <ul id="select_ul" class="select-ul">
            
        </ul>
    </div>
</div>

css樣式：

.select-content {
    width: 200px;
    position: relative;
}
.select-content .select-input {
    width: 100%;
}
.select-content .sanjiao {
    position: absolute;
    left: 190px;
    top: -2px;
    cursor: pointer;
}
.select-content .sanjiao .dot-bottom {
    font-size: 0;
    line-height: 0;
    border-width: 5px;
    border-color: #6a6a6a;
    border-bottom-width: 0;
    border-style: dashed;
    border-top-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
}
.select-content .search-select {
    display: none;
    position: absolute;
    left: 0;
    top: 22px;
    z-index: 999;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #799bd2;
    background-color: #f0f0f0;
}
.select-content .search-select .select-ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.select-content .search-select .select-ul .li-select {
    color: #555;
    padding: 2px 10px;
    cursor: pointer;
}
.select-content .search-select .select-ul .li-hover {
    color: #fff;
    background-color: #1e90ff;
}

js部分:

var tempArr = [{
    machineName: '北京',
    newMahinceId: '001'
},
{
    machineName: '南京',
    newMahinceId: '002'
},
{
    machineName: '寧波',
    newMahinceId: '003'
},
{
    machineName: '南寧',
    newMahinceId: '004'
},
{
    machineName: '上海',
    newMahinceId: '005'
},
{
    machineName: '廣州',
    newMahinceId: '006'
},
{
    machineName: '杭州',
    newMahinceId: '007'
},
{
    machineName: '西寧',
    newMahinceId: '008'
},
{
    machineName: '西安',
    newMahinceId: '009'
},
{
    machineName: '濟南',
    newMahinceId: '010'
},
{
    machineName: '南昌',
    newMahinceId: '011'
},
{
    machineName: '鄭州',
    newMahinceId: '012'
},
{
    machineName: '海口',
    newMahinceId: '013'
}];
searchInput(tempArr);

function newOptions(tempArr){
    var listArr = [];
    for(var i=0;i<tempArr.length;i++){
        if(tempArr[i].machineName.indexOf($('#select_input').val()) > -1){
            listArr.push(tempArr[i]);
        }
    }
    var options = '';
    for(var i = 0; i < listArr.length; i++) {
        opt = '<li class="li-select" data-newMachineId="' + listArr[i].newMahinceId + '">' + listArr[i].machineName + '</li>';
        options += opt;
    }
    if(options == ''){
        $('#search_select').hide();
    }else{
        $('#search_select').show();
        $('#select_ul').html('').append(options);
    }
}
function searchInput(tempArr){
    $('select-content .sanjiao').on('click',function(){
        $('#select_input').focus();
    });
    $('#select_input').on('keyup',function(){
        newOptions(tempArr);
    });
    $('#select_input').on('focus',function(){
        $('#search_select').show();
        newOptions(tempArr);
    });
    $('#select_ul .li-disabled').on('click',function(){
        $('#search_select').show();
    });
    $('#search_select').on('mouseover',function(){
        $(this).addClass('ul-hover');
    });
    $('#search_select').on('mouseout',function(){
        $(this).removeClass('ul-hover');
    });
    $('#select_input').on('blur',function(){
        if($('#search_select').hasClass('ul-hover')){
            $('#search_select').show();
        }else{
            $('#search_select').hide();
        }
    });
    $('#select_ul').delegate('.li-select', 'click',function(){
        $('#select_ul .li-select').removeClass('li-hover');
        var selectText = $(this).html();
        var newMachineIdVal = $($(this)[0]).attr("data-newMachineId");
        $('#select_input').val(selectText);
        $('#search_select').hide();
        $("input[name='newMachineId']").val(newMachineIdVal);
//          console.log($("input[name='newMachineId']").val())
    });
    $('#select_ul').delegate('.li-select', 'mouseover',function(){
        $('#select_ul .li-select').removeClass('li-hover');
        $(this).addClass('li-hover');
    });
}