オートコンプリートjqueryのバックエンドの完成方法

Question

テキストボックスがあります 中に自動完成します。 オートコンプリートのデータは、データベースを介して与えられます。

これは私のjQueryのです：

var data = "autocompletetagdata.aspx" 
    $("#item").autocomplete({ 
     source: data 
    }); 


protected void Page_Load(object sender, EventArgs e) { 
    return "['word', 'hello', 'work', 'oi', 'hey']";  
} 

Answer 1

protected void Page_Load(object sender, EventArgs e) 
{ 
    string term = Request.QueryString["term"]; 
    SqlConnection myConnection = new SqlConnection(connStr); 
    myConnection.Open(); 
    string result = "["; 
    int i = 0; 
    string SQL = ("select LTRIM(RTRIM(PGPRDC)) As PGPRDC FROM SROPRG SROPRG where PGPRDC like '" + term + "%'"); 
    SqlCommand myCommand = new SqlCommand(SQL, myConnection); 
    StringBuilder sb = new StringBuilder(); 
    try 
     { 
     SqlDataReader reader = myCommand.ExecuteReader(); 
     if (reader.HasRows) 
     { 
      while (reader.Read()) 
      { 
      result += ""; 
      result += "\"" + reader.GetString(0) + "\"";       
      result += ","; 
      i += 1; 
      sb.Append(reader.GetString(0)) 
          .Append(Environment.NewLine); 
      } 
     } 
     reader.Close(); 
     } 
    catch (Exception ex) 
    { 
     myConnection.Close(); 
    } 
    result = result.Substring(0, result.Length - 1); 
    myConnection.Close(); 
    result += "]"; 
    Response.Write(result); 
} 

Answer 2

私が何を間違っていることは、あなたがJSON形式のデータではなく、カンマ区切りの文字列を返す必要があると思います。 demos pageを見て、それは言う：

データソースは、JSONデータ、ソース・オプションの簡単なURLを介して指定 を返すサーバー側のスクリプトです。

Answer 3

as：http://www.srikanthtechnologies.com/blog/dotnet/jqueryautocomplete.aspx 代わりに文字列のリストを返してください。

[WebMethod] 
public static List<string> PopSearch() 
{ 
return new List<string> { "oi", "oi", "hey"}; 
} 

Answer 4

jQueryのオートコンプリートが結果としてJSONを期待ので、これは、より複雑なデータについては

return "['word', 'hello', 'work', 'oi', 'hey']"; 

に動作します何があなたのために働いているように見えるんのでJavaScriptSerializer

Answer 5

を使用することを検討して、「あなたのことを確認してくださいあなたは、基本をカバーしている：

• jQueryとjQueryの両方をロードしていますかUIライブラリ？ （オートコンプリートはjQuery UIです）
• DOM準備関数内でjQueryコードを呼び出していますか？
• ブラウザでWebメソッドを直接実行してデータを取得できますか？

Answer 6

これを試してください：あなたのコードで

$("#item").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      type: "POST", 
      url: "autocompletetagdata.aspx/Search", 
      data: { "search": request.term }, 
      contentType: "application/json; charset=utf-8", 
      success: function (results) { 
       var data = $.parseJSON(results); 
       response($.map(data, function (item) { 
        return { value: item } 
       })) 
      } 
     }); 
    } 
}); 

を背後に、それをWebメソッド作成：データと

[WebMethod] 
public static void Search(string search) 
{ 
    string[] list = new [] { "word", "hello", "work", "oi", "hey" }; 

    return list.Where(x => x.StartsWith(search)); 
} 

Answer 7

オートコンプリートをされていない、本当にすべてが難しいです。まず、返品タイプを設定する必要があります。最も簡単なので、JSON形式にする傾向がある：

PHPコントローラーエンド

// be sure to use echo, not return 
echo json_encode($yourDataAsArrayOrObject); 

その一部最後に完了戻ってあなたのjavascriptに行く

$("#item").autocomplete({ 
    // source should be a url to the controller function that returns the data 
    source: 'www.yoursite.com/controller/function', 
    search: function(e, ui) {}, // here you can manipulate other elements or items while the data is being retrieved, 
    select: function(e, ui) { /* ui.item is item slected */ } // here you can manipluate things based on the item that was selected, for instance, save a list of sub data to another dom element 
}); 

、警告

// You will need to use ._renderItem to items as they are received by database. 
// For instance, if you want to display the dropdown items in a custom way. 
$("#item")._renderItem = function(ul, item) { 
    // the item. depends on the information you got from server 
    return ul.append($("<li></li>").prepend($("<h3></h3>").text(item.label)).append($("<p></p>").text(item.value))); 
}; 

で

Answer 8

この例では、返されるデータは次のとおりです。有効なJSONを生成しない一重引用符（['word'、 'hello'、 'work'、 'oi'、 'hey']）で区切られています。

一重引用符を二重引用符で置き換えるだけで動作します。例： 'word'は 'word'になります。あなたは、文字列、サーバー側を構築する方法に応じて、あなたは「[」「単語」」、 『』こんにちは 『』のように二重引用符をエスケープする必要があるかもしれない、など

protected void Page_Load(object sender, EventArgs e) { 
    return "[""word"", ""hello"", ""work"", ""oi"", ""hey""]";  
} 

幸運。