jQuery – 自动完成(Autocomplete)

需求：在查询记录的时候，输入第一个字，就自动把以这个字开头的相关记录查找出来，输入2个字就过滤以这两个子开头的记录，依次类推。

我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。

    <!-- 引入jQuery UI的css文件 -->
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
    <!-- 引入jQuery的js文件 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
    <!-- 引入jQuery UI的js文件 -->
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

在View界面添加如下js代码：

	<label>
	    <span>用户名：</span>
	    @Html.TextBox("uesrName", null, new { @class = "m-wrap small" })
	</label>

$(function () {
         $("#uesrName").autocomplete({
                minLength: 0,
                autoFocus:true ,
                matchCase:true,
                autoFill: true,
                selectFirst: true,
                source: function (request, response) {
                    $.ajax({
                     url: '@Url.Action("getUserInfoList", "ErrorCode")',
                     type: "POST",
                     dataType: "json",
                     data: { uesrName: request.term},
                     success: function (data) {
                         response(
                             $.map(
                                 data,
                                 function (item) {
                                     return {
                                         label: item.userName,
                                         value: item.deviceID,
                                         value2: item.userID
                                     }
                                 } //end function (item)
                             )//end  map
                         ); //end response
                     } //end  success
                 }); //end ajax
             }, //end  source

             focus: function (event, ui) {
                 //$(this).val(ui.item.label);
                 $("#diviceId").val(ui.item.value);
                 $("#clientId").val(ui.item.value2);
                 $('#exitUser').val(ui.item.label);
                 return false;
             }, //end focus

             select: function (event, ui) {
                 $(this).val(ui.item.label);
                 $("#diviceId").val(ui.item.value);
                 $("#clientId").val(ui.item.value2);
                 $('#exitUser').val(ui.item.label);
                 return false;
             } //end  select  
         }); //end autocomplete
     });      //end  function

JavaScript代码中map解释：
jquery 中 $.map 的使用方法 ：$.map(data,function(item,index){return XXX})

遍历data数组中的每个元素，并按照return中的计算方式 形成一个新的元素，放入返回的数组中

		var b = $.map( [55,1,2], function( item,index ) 
		{  return {  "label": item,  "value": index  }});
                        alert(b[0].label +"  "+ b[0].value);
			//输出为  55 0 

		var array = [0, 1, 52, 97];
		array = $.map(array, function(a, index) {
		  return [a - 45, index];
		}); 
		//输出为:[-45, 0, -44, 1, 7, 2, 52, 3] 

Controller代码如下：

#region 根据用户名检索用户信息
        /// <summary>
        /// 根据用户名检索用户信息(错误码添加页面)
        /// Ajax请求
        /// </summary>
        /// <param name="uesrName"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult getUserInfoList(string uesrName)
        {
             ClientRequest request = new ClientRequest();

            var result = this.ClientService.GetOnlyClientList(request);
            var formateData = result.AsEnumerable()
                .Select(x => new
                {
                    userName = x.login_name,
                    userID = x.ID,

                    //防止取得的Client没有分配gateway
                    deviceID = x.gateway.client_uid
                });

            if (!string.IsNullOrEmpty(uesrName))
            {
                formateData = formateData
           .Where(x => x.userName.Contains(uesrName.Trim()));
            }

            return Json(formateData, JsonRequestBehavior.AllowGet);
        }
        
        #endregion