input 输入值展示下拉框

 html

                人员姓名
                

                    
                    @*

                    
*@
                
                手机号码
                

                    
                
            

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("
");//添加下拉层
    $("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 = "" + item.RealName + "/" + item.Sex + "/"+ item.Mobile + "/" + item.Commerce+"";
            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 += "
" + user_all_list[i] + "
";
        }
    }
    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需自定义重写，未做下拉分页