需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入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>
JavaScript代码中map解释:
jquery 中 $.map 的使用方法 :$.map(data,function(item,index){return XXX})
遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的元素,放入返回的数组中
Controller代码如下:
我们需要在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