MVC联想查询绑定下拉框

前言
在做搜索时，输入些内容时需要弹出下拉框给用户进行选择，极大的方便了用户，会给用户带来不一样的体验
Controller

public ActionResult SSAC(string UserName)
        {
            var list = (from tb in myModel.PW_User
                        where (tb.UserNuber.Contains(UserName))
                        select tb
                        ).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

HTML

<div style="position:relative;width:200px;height:30px;" id="AAACCC">
        <input type="text" style="position:absolute;z-index:1;width:90%;height:94%;border:none;margin:1px;border-radius: 0;border-right: 1px solid #808080;" />
        <select style="position:absolute;z-index:0;width:100%;height:100%;border:none;">
            <option></option>
        </select>
    </div>

JS
引用JQ文件

<script src="~/Plugins/jquery-3.2.1.min.js"></script>

写如下代码

<script>
LenovoQuery("#AAACCC", "/Main/SSAC", "UserName");//调用方法;参数(divID,控制器地址,对应参数)
    function LenovoQuery(DName, Url, CorrespondingName) {
        $("" + DName + " input").on("input propertychange",function () {//使用on方法添加input改变内容触发
                $.get("" + Url + "?" + CorrespondingName + "=" + $(this).val() + "", function (data) {//get方式提交
                    $("" + DName + " select option").remove();//每次调用提交先清空下拉框的内容，以免叠加内容
                    if (data.length == 0) {//判断
                        $("" + DName + " select").append("<option></option>")//添加下拉
                    }
                    $.each(data, function (i) {//遍历数据
                        $("" + DName + " select").append("<option value=" + i + ">" + data[i].UserNuber + "</option>");//添加下拉
                    })
                })
        })
   
    $("" + DName + " select").click(function () {
        if ($(this)[0][$(this)[0].value] != undefined) {//如果数据不为空
            $("" + DName + " input").val($(this)[0][$(this)[0].value].innerHTML);//把下拉框选中的内容赋值给输入框
        }
    })
}
 </script>

效果
未输入时

输入时

点击下拉时

选定时

联想查询就完成了
END