input 输入值展示下拉框

 html

<div class="form-group" data-id="RealName">
                <label class="col-md-2 control-label">人员姓名</label>
                <div class="col-md-4">
                    <input class="form-control" value="" autocomplete="off" id="RealName" name="RealName" required="required" type="text" data-wj-list="select">
                    @*<div class="user_select_list">
                    </div>*@
                </div>
                <label class="col-md-2 control-label">手机号码</label>
                <div class="col-md-4">
                    <input class="form-control" value="" autocomplete="off" id="Mobile" name="Mobile" maxlength="11" type="text">
                </div>
            </div>

css

.user_select_list{position:absolute;z-index:999;background:#fff;border:1px solid #9c9c9c;width:100%; 
display:none;max-height:300px;overflow-y:scroll;}

js

$(function () {
 
    GetAll_Select();
    $("input[data-wj-list='select']").after("<div class=\"user_select_list\"><ul></ul></div>");//添加下拉层
    $("input[data-wj-list='select']").on("input", (function () { //获取输入值
        //console.log($(this).val());
        if ($(this).val() != "") {
            Get_Filter_Select($(this).val());
        }
        else {
            $(".user_select_list").hide();
        }
    })
    ).focus(function () { //获取焦点
        if ($(this).val() != "") {
            Get_Filter_Select($(this).val());
        }
        else {
            $(".user_select_list").hide();
        }
    });


//点击div以外，关闭下拉层
    $(document).bind("click", function (e) {
        var target = $(e.target);
        if (target.closest("div[data-id='RealName']").length == 0) {
            $(".user_select_list").hide();
        }
    }) 
   
    
})
var user_all_list = [];//记录所有会员记录数组
//获取所有信息添加入数组
function GetAll_Select() {
    $.get("/api/User/GetAllUser", function (data) {
        $.each(data, function (index, item) {
            var h = "<a href=\"javascript:void(0);\" data-wj-id=\"" + item.MemberID + "\" data-wj-realname=\"" + item.RealName + "\" data-wj-mobile=\"" + item.Mobile + "\" onclick=\"Get_User_Select(this)\">" + item.RealName + "/" + item.Sex + "/"+ item.Mobile + "/" + item.Commerce+"</a>";
            user_all_list.push(h);
        })
    })
}
//过滤数据展示下拉框
function Get_Filter_Select(u_value) {
    var html = "";
    for (var i = 0; i < user_all_list.length; i++) {
        //如果字符串中不包含目标字符会返回-1
        if (user_all_list[i].indexOf(u_value) >= 0) {
            html += "<li>" + user_all_list[i] + "</li>";
        }
    }
    if (html != "") {
        $(".user_select_list ul").html(html);
        $(".user_select_list").show();
    }
    else {
        $("#Mobile").val('');
        $(".user_select_list").hide();
    }
}
//确认选择值
function Get_User_Select(obj) {
    $("#RealName").val($(obj).attr("data-wj-realname"));
    $("#Mobile").val($(obj).attr("data-wj-mobile"));
    $(".user_select_list").hide();
}

css需自定义重写，未做下拉分页