asp.net 实现 autocomplete [自动完成] ajax
问题描述：当我们在textbox中输入字的时候，希望相关字下拉提示，供选择。
解决办法：使用jquery实现。
1、在.net中创建文件：Handler.ashx，代码如下：
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;// 添加两个命名空间
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data;
using System.Data.SqlClient;
namespace ZQY.Report.CollectInfo
{
/// <summary>
/// Handler 的摘要说明
/// </summary>
public class Handler : IHttpHandler
{
/// <summary>
/// 根据关键字过滤内容
/// /// </summary>
/// <param name="keyword">关键字</param>
/// /// <returns>过滤数组</returns>
private string[] GetFilteredList(string keyword)
{
List<string> countryList = new List<string>();
//此处选项一般从数据库中读取，然后循环添加给countrylist对象即可。
DataSet ds = new DataSet();//创建数据集；
SqlConnection conn = new SqlConnection(DBHelper.ConnectionString);
try
{
string sql = " SELECT distinct [company_name] FROM [dbo].[dim_company]";
SqlDataAdapter dr = new SqlDataAdapter(sql, conn);//上面两句可以合并成这一
dr.Fill(ds); //填充数据集
for (int i = 0; i < ds.Tables[0].Rows.Count;i++ )
{ countryList.Add(ds.Tables[0].Rows[i]["company_name"].ToString()); }
}
catch (Exception ex)
{
//conn.Close(); 关闭数据库连接
if (conn.State == ConnectionState.Open) //判断数据库连接状态，是否连接
{
conn.Close();
}
}
//conn.Close(); 关闭数据库连接
if (conn.State == ConnectionState.Open) //判断数据库连接状态，是否连接
{
conn.Close();
}
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、创建Default.aspx文件：代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <link type="text/css" rel="Stylesheet" href="js/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<%-- 此处为juery调用脚本--%>
<script type="text/javascript"> $(function () { $("#txtSearch").autocomplete({ minLength: 1, // 设置搜索的关键字最小长度// 设置自动完成列表的函数，函数包括两个参数，requset和response
source: function (request, response) {
$.ajax({ type: "POST", // 通过request.term可以获得文本框内容
url: "Handler.ashx?keyword=" + request.term, contentType: "application/json; charset=gb2312", 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>
</head> <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> </html>
3、实现效果如上图所示：
总结：使用jquery时，需首先下载如下包：jquery-ui-1.8.16.custom.zip（下载地址：http://jqueryui.com/download）
内部包含如下三个文件：jquery-ui-1.8.16.custom.css jquery-1.6.2.min.js jquery-ui-1.8.16.custom.min.js
如果是汉字：需要在配置文件中加入如下： <globalization requestEncoding="gb2312" responseEncoding="gb2312" />
否则可能产生乱码！
时间： 2024-10-08 15:43:28