利用Jquery easyui里的autocomplete(1.10.0版本) 的异步请求(remot.html)
添加引用
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<input type="text" value="@ViewData["searchWhere"]" name="txtContent" autocomplete="off" class="search-text2" />
异步调用Search控制器的AutoComplete
<script type="text/javascript"> $(function () { $("#searchTxtContent").autocomplete({ source: "/Search/AutoComplete" }); });
</script>
在控制器定义方法
#region 搜索热词 public ActionResult AutoComplete() { string term = Request["term"]; List<string>list=KeyWordsRankService.GetSearchWord(term); return Json(list.ToArray(),JsonRequestBehavior.AllowGet); } #endregion
定义查询数据库方法
/// <summary> /// 返回热词 /// </summary> /// <param name="str"></param> /// <returns></returns> public List<string> GetSearchWord(string str) { string sql = "select KeyWords from KeyWordsRank where KeyWords like @msg"; return this.GetCurrentDbSession.ExecuteSelectQuery<string>(sql, new SqlParameter("@msg",str+"%")); }
在DBSESSION中定义
public List<T> ExecuteSelectQuery<T>(string sql, params System.Data.SqlClient.SqlParameter[] pars) { return Db.Database.SqlQuery<T>(sql, pars).ToList(); }
-----------------------------jquery autocomplete 自动完成-----------------------------------------------------------------------
支持的数据源
jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。
普通的Array格式没有什么特殊的,如下:
. 代码如下:["cnblogs","博客园","囧月"]
对于JSON格式的Array,则要求有:label、value属性,如下:
. 代码如下:[{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}]
其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:
. 代码如下:
[{label: "cnblogs"}, {label: "囧月"}]
[{value: "cnblogs"}, {value: "囧月"}]
如果label和value都没有指定,则无法用于autocomplete的提示。
另外需要注意,对于从服务器端输出的JSON的key必须用双引号,如下:
. 代码如下:[{"label": "博客园", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}]
否则可能会出现parsererror错误。
主要的参数
jQuery UI Autocomplete常用的参数有:
Source:用于指定数据来源,类型为String、Array、Function
String:用于ajax请求的服务器端地址,返回Array/JSON格式
Array:即字符串数组 或 JSON数组
Function(request, response):通过request.term获得输入的值,response([Array])来呈现数据;(JSONP是这种方式)
minLength:当输入框内字符串长度达到minLength时,激活Autocomplete
autoFocus:当Autocomplete选择菜单弹出时,自动选中第一个
delay:即延迟多少毫秒激活Autocomplete
其他不常用的就不罗列了。
使用方法
假如页面上有以下输入框:
<input type="text" , {
term: extractLast(request.term)
}, response);
}
}));