jQuery Mobile AutoComplete 在 ASP.NET 中与 SQL Server 数据库连接
4.58/5 (17投票s)
如何使用通用处理程序 (.ashx) 文件以及数据库连接，在 ASP.NET 中使用 jQuery mobile autocomplete。
引言
本文介绍了如何使用通用处理程序 (.ashx) 文件以及数据库连接，在 ASP.NET 中使用 jQuery mobile autocomplete。
在本示例中，autocomplete 使用包含字符串和回调数据的数据库，并带有 mouseClick() 事件。
背景
通过指定 source 选项，autocomplete 可以自定义以适应各种数据源。数据源可以是：
本地数据的数组
本地数据可以是一个简单的字符串数组，也可以包含数组中每个项目的对象，其中包含 label 或 value 属性，或者两者都有。label 属性将显示在建议菜单中。用户从菜单中选择内容后，value 将插入到输入元素中。如果只指定了一个属性，它将同时用于两者，例如，如果您只提供 value 属性，则 value 也将用作 label。
一个指定 URL 的字符串
当使用 String 时，Autocomplete 插件期望该 string 指向一个返回 JSON 数据的 URL 资源。它可以是同一主机上的，也可以是不同的主机上的（如果不同，必须提供 JSONP）。请求参数 "term" 会被添加到该 URL。数据本身可以与上面描述的本地数据格式相同。
一个回调函数
第三种变体，回调函数，提供了最大的灵活性，可用于将任何数据源连接到 Autocomplete。回调函数接收两个参数：
一个请求对象，其中包含一个名为 "term" 的属性，该属性指的是当前文本输入框中的值。例如，当用户在国家字段中输入 "tu" 时，Autocomplete 的 term 将等于 "tu"。
一个响应回调，它期望一个参数来包含要建议给用户的数据。这些数据应根据提供的 term 进行过滤，并且可以是上面描述的简单本地数据的任何格式（字符串数组或带有 label/value/两者属性的对象数组）。
在提供自定义源回调时，处理请求期间的错误非常重要。即使遇到错误，您也必须始终调用响应回调。这确保了小部件始终处于正确状态。
Using the Code
首先，解压 "SQL DB.zip" 文件，并将数据库文件附加到您的 SQL Server（jQueryMobileAutoComplete.mdf, jQueryMobileAutoComplete_log.ldf 文件），或者创建另一个数据库。
这是您需要的 SQL 表脚本：
USE [jQueryMobileAutoComplete]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Countries](
[CountryID] [int] IDENTITY(1,1) NOT NULL,
[CountryName] [varchar](100) NOT NULL,
CONSTRAINT [PK_Countries] PRIMARY KEY CLUSTERED
(
[CountryID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO具有这些方法的前端代码非常轻量且简单。
向您的项目添加一个新的“通用处理程序”，名称为“Search.ashx”文件。实际上，.ashx 是一个 HTTP 处理程序；您可以使用 IHttpHandler 创建一个处理程序，在 httpHandlers 部分注册它，并使用它来处理请求。
当 autocomplete 插件请求处理程序时，它会将输入的 term 作为 "term" 项放到查询字符串中。我们的代码只需捕获该项，并在 SQL LIKE 语句中使用它来获取匹配的 resultset。然后，我们将值转换为 string 数组，将其传递给 JavaScriptSerializer 转换为 JSON，然后以 ContentType "application/javascript" 的形式发送出去。页面上的插件将显示选项，用户可以选择一个。完成此操作后，选定的选项将填充到 <ul> 元素中。
///
/// Search.ashx
///
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace jQueryMobileAutoComplete
{
/// <summary>
/// Summary description for Search
/// </summary>
public class Search : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (!String.IsNullOrEmpty(context.Request.QueryString["term"].ToString()))
{
string connStr = ConfigurationManager.ConnectionStrings["DBCONNSTRING"].ToString();
SqlConnection sqlconn = new SqlConnection(connStr);
SqlCommand sqlcmd = new SqlCommand();
try
{
if (sqlconn.State == ConnectionState.Closed)
{
sqlconn.Open();
}
sqlcmd.Connection = sqlconn;
sqlcmd.CommandType = CommandType.Text;
sqlcmd.CommandText = "SELECT top 10 x.CountryName as cn " +
"FROM Countries as x WHERE x.CountryName LIKE '%' + @cn + '%'";
sqlcmd.Parameters.AddWithValue("@cn",
context.Request.QueryString["term"].ToString());
sqlcmd.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
string[] items = new string[dt.Rows.Count];
int ctr = 0;
foreach (DataRow row in dt.Rows)
{
items[ctr] = (string)row["cn"];
ctr++;
}
//convert the string array to Javascript and send it out
context.Response.Write(new JavaScriptSerializer().Serialize(items));
}
if (sqlconn.State == ConnectionState.Open)
{
sqlcmd.Dispose();
sqlconn.Close();
sqlconn.Dispose();
}
}
catch (Exception)
{
throw;
}
finally
{
if (sqlconn.State == ConnectionState.Open)
{
sqlcmd.Dispose();
sqlconn.Close();
sqlconn.Close();
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
我们完成了！运行您的项目。
关注点
jQuery Mobile 目前不支持多项标签选择。
结论
因此，通过这种方式，您可以使用通用处理程序（.ashx）文件在 ASP.NET 中使用 jQuery mobile autocomplete 搜索和选择数据。
历史
- 2013 年 12 月 6 日：首次发布
- 2013 年 12 月 12 日：更新发布