输入 模糊搜索

模糊查找

    $('body').on('keyup', '.calltitle', function () {
        findTitle($(this).val())
        $('.titleul').show();
    })
    $('body').on('click', '.titleul li', function () {
        $('.titleul').prev('input').val($(this).text());
        $('.titleul').prev('input').attr('data-value', $(this).attr('data-value'));
        $('.titleul').html('');           
        $('.titleul').hide();
    })
    function findTitle(str) {
        $.ajax({
            type: 'POST',
            url: '/admin/Account/VagueSearch',
            data: JSON.stringify({ name: str }),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                if (data.status == "success") {
                    var datas = data.data;
                    var inner = '';
                    for (var i = 0; i < datas.length; i++) {
                        inner += '<li style="color:#666;" data-value="' + datas[i].Id + '">' + datas[i].Name + '</li>'
                    }
                    $('.titleul').html(inner);
                }
            }
        })
        $('.titleul').html('');
    };

html

 <div class="title_box"> 
   <span>学院：</span> 
    <input type="text" class="calltitle " style="background-color: #fff;" />
    <ul class="titleul"></ul>                
</div>

css

<style>
.title_box {
    display: inline-block;
    position: relative;
}

.titleul {
    overflow - y: auto;
    height: 200px;
    width: 160px;
    position: absolute;
    z-index: 999;
    top: 33px;
    left: 84px;
    display: none;
}

    .titleul li {
        width: 100%;
        text-align: left;
        padding: 0 5px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        background: #eee;
        line-height: 24px;
        cursor: pointer;
    }
</style>