Tonto23 Tonto23 - 3 months ago 12
ASP.NET (C#) Question

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

in my jquery autocomplete textbox I want to show the "title" value from database and my code works fine but I want that when a user clicks one result, redirect him to this page:

ArticleDetails.aspx?ID=@ID

but my code is passing the "title" field and
I don't know how to pass the "ID" field from database to that href.

this is my code:



<%@ 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>





and this is code-behind:



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

Jquery Ui should also Support if you use an array of Json objects with the properties Label and value. So in the response from your server you have to return a Json array of this objects.

Maybe you change the server Code to something like this:

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;
        }
    }
}

On the client you maybe need to parse the Jsonarray. So just change the line in succes to this.

response(JSON.parse(data));

And now you should be able to access the value propertie and get the related id.