jQueryオートコンプリートのSQLフォーム？

Question

私はjQueryとSQLを使ってオートコンプリート・フォームを作ることができるのだろうかと疑問に思っていました。おそらく、jQueryの.change()とSQLのSELECT * FROM table WHERE name LIKE '%$q%'の機能があります。これは可能でしょうか？

Answer 1

概念的には可能ですが、jQueryはSQL DBに直接アクセスできません。したがって、そのドル記号'%$q%'で私には意味をなさない。また、ユーザーが入力した単語で始まる単語を検索する可能性が高いため、LIKE式の末尾に「％」を付けるだけで、先頭には「％」が付きません。

Answer 2

テキストボックスにバインドして値が変更されたときに自動補完を表示しようとすると、次のように動作するはずです。

//Javascript 
$("#txtSearchValue").autocomplete({ 
    source: function (request, response) { 
     var regex = RegExp('[^a-z0-9\\&\\s]', 'gi'); 
     var obj = { 
      searchValue: request.term.replace(regex, '') 
     }; 

     $.ajax({ 
      type: "POST" 
      , contentType: "application/json; charset=utf-8" 
      , url: "AutoComplete.asmx/QueryList" 
      , data: JSON.stringify(obj) 
      , dataType: "json" 
      , async: true 
      , success: function (data) { 
       response(data.d); 
      } 
      , error: function (request, status, error) { 
       var err = jQuery.parseJSON(request.responseText); 
       alert(err.Message); 
      } 
     }); 
    } 
    , minLength: 2 
}); 


//Auto-Complete on the server (code using C#) 
[WebMethod] 
[System.Web.Script.Services.ScriptMethod] 
public string[] QueryList(string searchValue) 
{ 
    string sqlSelect = @"select column_name 
         from table 
         where column_name like '%' + @target + '%'"; 
    using(SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["connString"].ConnectionString)) 
    { 
     using(SqlDataAdapter da = new SqlDataAdapter(sqlSelect, conn)) 
     { 
      da.SelectCommand.Parameters.AddWithValue("@target", searchValue); 
      DataTable dt = new DataTable(); 
      conn.Open(); 
      da.Fill(dt); 

      string[] results = new string[dt.Rows.Count]; 
      for (int i=0; i<results.Length; i++) 
      { 
       results[i] = dt.Rows[i]["column_name"].ToString(); 
      } 

      return results; 
     } 
    } 
}