2016-08-13 7 views
0

jqueryオートコンプリートテキストボックスデータベースの「タイトル」の値を表示したいと思いますが、コードが正常に機能しますが、ユーザーが1つの結果をクリックすると、このページへの彼:ASP.NETでjqueryオートコンプリートの選択項目のIDを取得するには

[email protected]

が、私のコードは、私がそれにデータベースから「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>

と、これはコードビハインドである:あなたの場合jqueryのUIがまたサポートしていなければならない

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

答えて

0

Labelとvalueのプロパティを持つJsonオブジェクトの配列を使用します。だからあなたのサーバーからの応答では、このオブジェクトのJson配列を返す必要があります。

たぶん、あなたはこのような何かにサーバーコードを変更する:あなたは多分Jsonarrayを解析する必要があるクライアントで

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

。だから、これに従って行を変更してください。

response(JSON.parse(data)); 

これで値propertieにアクセスして関連IDを取得できるようになりました。

+0

私のコードを編集しましたが、構文エラーが発生しています。 説明:この要求を処理するために必要なリソースのコンパイル中にエラーが発生しました。以下の特定のエラーの詳細を確認し、ソースコードを適切に変更してください。 コンパイラエラーメッセージ:CS1003: ライン35::{ 36行目:result.Add(新RespObj(){ 37行目:ラベル:DR [ "タイトル構文エラー、 '' ソースエラー期待"] .ToString()、 行38:値:dr [" id "] ToString() 行39:}); – Tonto23

+0

すべての角括弧などを正しく設定しましたか?コードを投稿できますか? –

+0

私の質問にコードを更新して追加しました... – Tonto23

関連する問題