Js带搜索功能的下拉框

由于select下拉框数据量较大，查找起来费时费力，可模糊查询成为迫切需求，本着用户体验至上的原则，用input框模拟可搜索的下拉框。
考虑到不能频繁向后台请求数据，这里默认数据是通过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');
    });
}