Jquery 搜索框

页面
 <span style="margin-left: 4%">申请人姓名：</span>
 <input id="txtUserName" name="UserName" class="easyui-textbox" data-options="" />
 <div  id="divKey" hidden="hidden" style="top: 40px;left: 370px;" class="KeyClass"></div>

CSS
.KeyClass{
line-height: 2;//行高
position: absolute;//生成绝对定位的元素 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 top left写在页面控件上 因为多个页面调用
background-color: white;//div背景为白色
width: 143px;
height: 160px;
overflow-y: auto;
padding-left: 5px;//里面li距离div左边5px
border: 1px solid gray; //div边框
border-top-color: white; //div上边框为白色
z-index: 1; //位于所有元素之上
}

Js

function SearchKeyUp(id, divID)
  $("#" + id).textbox('textbox').bind('change', function () { $("#" + divID).hide();});
  $("#" + id).textbox('textbox').bind('keyup', function () {
  var obj =  $("#" + divID);
  if ($(this).val() != "") {
   var keywords = $(this).val();
   obj.empty();
   obj.show();
   $.ajax({
        type: "get",
        url: "../ApprovalMattersService.asmx/GetAllUserName",
        data: { UserName: keywords },
        async: false,
        error: function (x, e) {
                 return true;
         },
        success: function (data) {
            data.forEach(function (value, index, array) {
            var inp = "";
            inp = "<li style ='list-style:none; line-height:30px;'  onclick=\"Choose('" + value.UserName + "','" + id + "','"+divID+"');\"   onmouseover ='overli(this)' onmouseout='outli(this)'>" + value.UserName + "</li>"
            obj.append(inp);
            });
        }        
    });      
 } else {   
       obj.hide();
    }
 });
}

function Choose(userName, id, divID) {
    $("#" + id).textbox("setValue", userName);
    $("#" + divID).hide();
}

function overli(lix) {
    lix.style.background = "#E0FFFF"; //浅蓝色
}
function outli(lix) {
    lix.style.background = "white";
}

后台方法
  public void GetAllUserName()
        {
            string UserName = Context.Request["UserName"];
            List<Model.EmployeeInfo> EmployeeInfo = new Model.EmployeeInfo().GetModelList(new List<string> { " and DelFlag = 0 and UserName like '%" + UserName + "%'" }, new List<string> { "*" });
            string json = new JavaScriptSerializer().Serialize(EmployeeInfo);
            Context.Response.ContentType = "json";
            Context.Response.Write(json);
        }

效果图

以上有个Bug，就是第一次点击的时候不管用，第二次点击才会将姓名显示到文本框里。
百度了很多方法 ，没有合适的 ，无奈之下将Choose方法和overli方法做了修改：
Choose方法只保留Div隐藏代码，overli增加了让鼠标一放到li标签上就将姓名显示到文本框里

inp = "<li style ='list-style:none;line-height:25px;'  onclick=\"Choose('" + value.UserName + "','" + id + "','" + divID + "');\"  onmouseover =\"overli(this,'" + id+"')\" onmouseout='outli(this)'>" + value.UserName + "</li>"

function Choose(userName, id, divID) {
    $("#" + divID).hide();
}

function overli(lix, id) {
    lix.style.background = "#E0FFFF"; //浅蓝色
    $("#" + id).textbox("setValue", lix.innerText);
 }