如何在 ASP.NET 中获取 jquery 自动完成的所选项目的 ID

Question

在我的 jquery 自动完成文本框中，我想显示数据库中的 "title" 值，我的代码工作正常，但我希望当用户单击一个结果时，将他重定向到此页面：

ArticleDetails.aspx?ID=@ID

但是我的代码传递了 "title" 字段并且我不知道如何将 "ID" 字段从数据库传递到该 href。

这是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $("#SearchText").autocomplete({
                select: function (event, ui) {
                    window.location.href = 'ArticleDetails.aspx?ID=' + ui.item.value;
                },
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "TestSearch.aspx/Getauto",
                        data: "{'title':'" + document.getElementById('SearchText').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("ERROR!!!");
                        }
                    });
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="SearchText" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

这是代码隐藏：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class TestSearch : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SearchText.Text = null;
    }

    public class RespObj
    {
        public string label { get; set; }
        public string value { get; set; }
    }

    [WebMethod]
    public static List<RespObj> Getauto(string title)
    {
        List<RespObj> result = new List<RespObj>();
        string cs = ConfigurationManager.ConnectionStrings["MyCS"].ConnectionString;
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SpMySearch", con);
            cmd.CommandType = CommandType.StoredProcedure;
            {
                con.Open();
                cmd.Parameters.AddWithValue("@SearchText", title);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(new RespObj(){
                        label = dr["title"].ToString(),
                        value = dr["id"].ToString()
                    });
                }
                return result;
            }
        }
    }
}

Answer 1

Jquery Ui 如果您使用具有标签和值属性的 Json 对象数组，也应该支持。因此，在服务器的响应中，您必须 return 这个对象的 Json 数组。

也许您将服务器代码更改为如下内容：

class RespObj {
    public string label { get; set; }
    public string value { get; set; }
}

[WebMethod]
public static List<RespObj> Getauto(string title)
{
    List<RespObj> result = new List<RespObj>();
    string cs = ConfigurationManager.ConnectionStrings["MyCS"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("SpMySearch", con);
        cmd.CommandType = CommandType.StoredProcedure;
        {
            con.Open();
            cmd.Parameters.AddWithValue("@SearchText", title);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                result.Add(new RespObj(){
                    label = dr["title"].ToString(),
                    value = dr["id"].ToString()
                });
            }
            return result;
        }
    }
}

在客户端上，您可能需要解析 Json 数组。所以只需将成功的行更改为此即可。

response(JSON.parse(data));

现在您应该可以访问 value 属性并获取相关 ID。

如何在 ASP.NET 中获取 jquery 自动完成的所选项目的 ID

How to get ID of selected item of jquery autocomplete in ASP.NET

c#

asp.net

jquery-ui-autocomplete