基于jquery的文本框与autocomplete结合使用(asp.net+json)

题目中所提到的“基于jquery的文本框与autocomplete结合使用(asp.net+json)”是一种前端技术组合，目的是实现输入框根据用户输入联想出可能的选项，这个功能在很多网站的搜索框和查询框中都有应用。

实现这个功能的主要步骤如下：

引入jQuery和jQueryUI两个 js 文件，jQueryUI是为了提供 autocomplete 的功能。

<!-- 引入jquery和jqueryUI的cdn地址-->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">

在页面中添加输入框，并给输入框设置 id 属性，使 jQuery 能够找到这个输入框。

<body>
<input type="text" id="inputTextBox"/>
</body>

编写 jQuery 代码，调用 autocomplete 方法，通过 ajax 获取后台数据，实现刷新选项的功能。

$(document).ready(function () {
$("#inputTextBox").autocomplete({
source: function (request, response) { // request参数包含了当前输入框的值。
$.ajax({
type: "POST", //调用web 页面的方式：post或get
dataType: "json", //返回json格式的数据
contentType: "application/json;charset=utf-8",//contentType发送信息至服务器时内容编码类型。
url: "ProcessJsonData.aspx/GetSelectedValue", // 调用的web页面地址
data: JSON.stringify({ prefixText: request.term }), //标的目的是将值转换成json格式的信息
success: function (data) {//回调函数
response($.map(JSON.parse(data.d), function (item) { // 将字符串转换成json格式数组，调用response方法刷新选择项。
return { label: item, value: item };
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2, // 输入框中至少输入2个字符才启动联想功能。
autoFocus: true // 自动聚焦。
});
});

让我们通过两个示例演示这个过程。

示例1：实现一个输入框，当用户输入‘a’时，联想出可能的选项：‘aaa’, ‘abc’, ‘apple’；当用户输入‘b’时，联想出可能的选项： ‘bbc’, ‘bee’, ‘banana’ 。

首先在 asp.net 项目中新建一个 .aspx 页面，名为 ProcessJsonData.aspx，页面类型选择 ScriptService，如下所示：

<%@ WebService Language="C#" CodeBehind="ProcessJsonData.aspx.cs" Class="WebApplication1.ProcessJsonData" %>

接着，在 ProcessJsonData.aspx.cs 文件中，新建一个名为 GetSelectedValue 的 public 静态方法（必须设置为静态方法并且设置为 public），用于返回联想选项。注意，该方法应该返回 json 格式数据。

[WebMethod]
public static string GetSelectedValue(string prefixText)
{
string result = "";
List<string> lstSelectedValues = new List<string>();
SqlConnection conn = new SqlConnection();
conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select FruitName from FruitList where FruitName like '%" + prefixText + "%'";
cmd.Connection = conn;
try
{
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
lstSelectedValues.Add(dr["FruitName"].ToString());
}
dr.Close();
}
catch
{
}
finally
{
conn.Close();
}
JavaScriptSerializer jss = new JavaScriptSerializer();
result = jss.Serialize(lstSelectedValues);
return result;
}

接着，新建一个 aspx 页面，含一个文本框和一些测试数据：

<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtSelectedValue" />
        </div>
    </form>
</body>

<!--假设我们的数据源是下面这个水果列表-->
CREATE TABLE [dbo].[FruitList](
[FruitID] [int] IDENTITY(1,1) NOT NULL,
[FruitName] [varchar](50) NOT NULL,
CONSTRAINT [PK_FruitList] PRIMARY KEY CLUSTERED 
(
[FruitID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

接着，添加以上的 jQuery 代码即可。

示例2：实现查询框，用户输入关键词后模糊匹配数据库中的历史订单号，并展示在下拉菜单中，支持用户快速选择历史订单号。

与示例1 的步骤相似，除了在 asp.net 项目中的 ProcessJsonData.aspx.cs 文件中的 GetSelectedValue 函数实现上可对 sql 语句进行修改，使其与数据库中的数据兼容，并透过 orderby 来按时间倒序排列历史订单号，如下所示：

[WebMethod]
public static string GetSelectedValue(string prefixText)
{
    string result = "";
    List<string> lstSelectedValues = new List<string>();
    SqlConnection conn = new SqlConnection();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = "select distinct OrderID from OrderInfo where OrderID like '%" + prefixText + "%' order by OrderDate DESC";
    cmd.Connection = conn;
    try
    {
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            lstSelectedValues.Add(dr["OrderID"].ToString());
        }
        dr.Close();
    }
    catch
    {
    }
    finally
    {
        conn.Close();
    }
    JavaScriptSerializer jss = new JavaScriptSerializer();
    result = jss.Serialize(lstSelectedValues);
    return result;
}

接着，新建一个 aspx 页面，含一个文本框和一些测试数据：

<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtSelectedValue" />
        </div>
    </form>
</body>

<!--假设我们的数据源是下面这个订单列表-->
CREATE TABLE [dbo].[OrderInfo](
    [OrderID] [varchar](50) NOT NULL,
    [OrderDate] [datetime] NOT NULL,
 CONSTRAINT [PK_OrderInfo] PRIMARY KEY CLUSTERED 
(
    [OrderID] ASC,
    [OrderDate] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

接着，添加以上的 jQuery 代码即可。

以上就是“基于jquery的文本框与autocomplete结合使用(asp.net+json)” 的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的文本框与autocomplete结合使用(asp.net+json) - Python技术站

基于jquery的文本框与autocomplete结合使用(asp.net+json)

相关文章