随笔- 577 文章- 5 评论- 97 阅读- 160万

Js带搜索功能的下拉框

由于select下拉框数据量较大，查找起来费时费力，可模糊查询成为迫切需求，本着用户体验至上的原则，用input框模拟可搜索的下拉框。
考虑到不能频繁向后台请求数据，这里默认数据是通过ajax一次获取的，然后前端筛选展示匹配的结果。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cyberobject.com - checkbox seclet or disselect all</title>
<style type="text/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;
}
</style>

</head>
<body>
<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>
<script src="https://www.pianshen.com/assets/js/jquery-1.9.1.min.js"></script>


<script language="JavaScript">
 
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');
    });
}        
</script>
</body>
</html>

作者：午后三点的阳光
链接：https://www.jianshu.com/p/5ee05ee0ff6f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

================================================================================================================================

 /**
     *监听关系改变
     * 
     * *****/
    $("#relation_id").change(function(){
        //每次改变将下拉框菜单数据清除
        //将申请项目下拉菜单数据清空
        var obj=document.getElementById('by_relation_project');
        obj.options.length=0;  
        
        

        var _value = $("#relation_id").val();

        //发送ajax请求获取病种
        $.ajax({
            type:'post',
            url:"/ecgc/care/axbk/help/get_project",
            data:{project_id:_value},
            success:function(result){
                var res = JSON.parse(result);               
                var data =res.msg;
          
                for(var i=0; i<data.length;i++){
                 
                   var _option = data[i]['project_name'];
                   var  _value = data[i]['id']+"#"+data[i]['project_name']+"#"+data[i]['money'];
                //    console.log(_option);
                //    console.log(_value);
                        $("#by_relation_project").append("<option value='"+_value+"'>"+_option+"</option>")
                        $(".content_input_project_money").val(data[0]['money'])
                        $(".content_input_project_money").attr("disabled","disabled");
                }
                $("#by_relation_project").append("<option value='999'>其他</option>")
              
            }  
        })

    })