ASP.NET jQuery 食谱25 (使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能)
2012-02-17 21:51
1716 查看
这节将使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能,并且这里会使用另外一个方法来实现AJAX调用服务器方法,就是通过ASP.NET HTTP handler来处理请求的数据。现在就来看下实现的步骤:
1.创建SearchKeys.ashx请求处理文件,并实现以下代码:
2.创建页面文件Recipe25.aspx,页面代码(HTML部分)如下:
3.页面文件Recipe25.aspx的脚本代码实现如下:(如何获取和引入jQuery UI已经在前面章节讲过,这里就不用重复了)
4.实现效果图:
5.分析XmlHttpRequest对象,请求参数和响应数据如下:
1.创建SearchKeys.ashx请求处理文件,并实现以下代码:
<%@ WebHandler Language="C#" Class="SearchKeys" %> using System; using System.Web; // 添加两个命名空间 using System.Collections.Generic; using System.Web.Script.Serialization; public class SearchKeys : IHttpHandler { /// <summary> /// 根据关键字过滤内容 /// </summary> /// <param name="keyword">关键字</param> /// <returns>过滤数组</returns> private string[] GetFilteredList(string keyword) { List<string> countryList = new List<string>(); countryList.Add("阿联酋"); countryList.Add("阿富汗"); countryList.Add("阿尔巴利亚"); countryList.Add("阿鲁巴"); countryList.Add("巴西"); countryList.Add("亚美利亚"); countryList.Add("西班牙"); List<string> filteredList = new List<string>(); foreach (string sCountry in countryList) { // 判断是否包含关键字的国家,然后加入到过滤后的集合中。 if (sCountry.Contains(keyword)) { filteredList.Add(sCountry); } } // 返回数组,以便后面能序列化为JSON格式数据 return filteredList.ToArray(); } public void ProcessRequest(HttpContext context) { string keyword = context.Request.QueryString["keyword"]; if (keyword != null) { JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串 string jsonString = serializer.Serialize(GetFilteredList(keyword)); context.Response.Write(jsonString); // 返回客户端json格式数据 } } public bool IsReusable { get { return false; } } }
2.创建页面文件Recipe25.aspx,页面代码(HTML部分)如下:
<body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 100px;"> <table border="0" cellpadding="3" cellspacing="3"> <tr> <td> <asp:Label ID="lblCountry" runat="server">国家:</asp:Label> </td> <td> <asp:TextBox ID="txtSearch" runat="server" Width="150px"></asp:TextBox> </td> </tr> </table> </fieldset> </div> </form> </body>
3.页面文件Recipe25.aspx的脚本代码实现如下:(如何获取和引入jQuery UI已经在前面章节讲过,这里就不用重复了)
<link type="text/css" rel="Stylesheet" href="../Styles/sunny/jquery-ui-1.8.17.custom.css" /> <script type="text/javascript" src="../Scripts/jquery.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript"> $(function () { $("#txtSearch").autocomplete({ minLength: 1, // 设置搜索的关键字最小长度 // 设置自动完成列表的函数,函数包括两个参数,requset和response source: function (request, response) { $.ajax({ type: "POST", // 通过request.term可以获得文本框内容 url: "SearchKeys.ashx?keyword=" + request.term, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // jQuery.map(array, callback) :将一个数组中的元素转换到另一个数组中。 // 下面就是把数组["value1", "value2",...]转换为[{value:"value1"}, {value:"value2"},...] response($.map(data, function (item) { return { value: item }; })); }, error: function () { alert("ajax请求失败"); } }); } }); }); </script>
4.实现效果图:
5.分析XmlHttpRequest对象,请求参数和响应数据如下:
相关文章推荐
- ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 使用jquery autocomplete实现类似搜索引擎的自动填充功能
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- jQuery Autocomplete实现文本框自动完成搜索功能
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- 智能搜索jquery-autocomplete 自动填充插件使用方法及参数使用说明
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET MVC使用jQuery实现Autocomplete
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法(looUpEdit可编辑)
- 使用AutoCompleteTextView和SharePreference实现搜索历史自动提示功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 基于asp.net下使用jquery实现ajax的解决方法
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法(looUpEdit可编辑)
- asp.net使用jquery实现搜索框默认提示功能
- ASP.NET jQuery 食谱22 (jQuery AJAX 基本方法使用和调试技巧)
- asp.net ajax 使用AutoCompleteExtender开发自动完成功能