利用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); 

})); 

 

相关文章: