web-dev-qa-db-ja.com

jQuery AutocompleteおよびASP.NET

このサイトとWeb全体で、jQueryとASP.NETを使用したオートコンプリートの優れたsimpleの例を検索しました。オートコンプリートで使用されるデータをWebサービスで公開したかったのです（そしておそらくそれを次に行います）。それまでの間、私はこれを機能させましたが、少しハックが多いようです...

私のページにはテキストボックスがあります。

<input id="txtSearch" type="text" />

私はjQueryオートコンプリートを使用しています。例に従ってセットアップします。

<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

これがハッキングを開始する場所です... Webサービスの代わりにページを呼び出します。

  <script type="text/javascript">
    $(document).ready(function(){
        $("#txtSearch").autocomplete('autocompletetagdata.aspx');
    });      
  </script>

このページでは、すべてのhtmlを削除し、これだけにしました（そうでなければ、オートコンプリートドロップダウンにさまざまなHTMLビットが表示されます）。

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

また、autocompletetagdata.aspxでは、SubSonicを使用して、データベースのデータをクエリ、フォーマット、および返しています（1行に1つのデータ項目）。

protected void Page_Load(object sender, EventArgs e)
{
    // Note the query strings passed by jquery autocomplete:
    //QueryString: {q=a&limit=150&timestamp=1227198175320}

    LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
        .Top(Request.QueryString["limit"])
        .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")
        .OrderAsc(LookupTag.Columns.TagDescription)
        .ExecuteAsCollection<LookupTagCollection>();

    StringBuilder sb = new StringBuilder();

    foreach (LookupTag tag in tags)
    {
        sb.Append(tag.TagDescription).Append("\n");
    }

    Response.Write(sb.ToString());
}

LIKEクエリを実行しない場合、入力した文字に一致するものを含むすべてが返されます。たとえば、「a」と入力すると、「Ask」と「Answer」、「March」、 「メガ」試合でスタートをしたかっただけです。

とにかく、それは機能し、セットアップは非常に簡単ですが、より良い方法はありますか？

asp.netjquerysubsonicautocomplete
50
djuth

私は最近オートコンプリートを実装しましたが、かなり似ています。私はaspxの代わりにashx（Generic Handler）を使用していますが、それは基本的にコードビハインドの同じコードです。

Ashxを使用すると、次のようになります。

<script type="text/javascript">
  $(document).ready(function(){
      $("#txtSearch").autocomplete('autocompletetagdata.ashx');
  });      
</script>

[WebService(Namespace = "http://www.yoursite.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutocompleteTagData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Note the query strings passed by jquery autocomplete:
        //QueryString: {q=a&limit=150&timestamp=1227198175320}

        LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
            .Top(context.Request.QueryString["limit"])
            .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%")
            .OrderAsc(LookupTag.Columns.TagDescription)
            .ExecuteAsCollection<LookupTagCollection>();

        foreach (LookupTag tag in tags)
        {
            context.Response.Write(tag.TagDescription + Environment.NewLine);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
32
bdukes

別の質問でこれを投稿しましたが、jQueryオートコンプリートプラグインの解析関数をオーバーライドして、任意の出力をサポートすることができます。

例：

    $("#<%= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", {
        parse: function(data) {
            var parsed = [];

            $(data).find("string").each(function() {
                parsed[parsed.length] = {
                    data: [$(this).text()],
                    value: $(this).text(),
                    result: [$(this).text()]
                };
            });
            return parsed;
        },
        dataType: "xml"
    });

これが期待するのは、XMLへの文字列配列です...非常に簡単です... SubSonicを使用している場合、RESTHandler（非表示のGEM !!!）をチェックアウトする必要があります。 JSON/XMLを返します。これを使用したクエリの例を以下に示します...

/Demo/services/Customers/list.xml?CustomerName=JOHN

List.xmlをlist.jsonに変更すると、結果がJSONに変更されます。上記のリクエストは、強く型付けされた「顧客」エンティティを返します。 LIKE、NOT LIKEなどをサポートするようにパラメーターを変更できます。非常に強力で、すべての配管が行われます...

ビデオは次のとおりです。 http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

10
Zachary

WebサービスまたはWCFサービスは、より良いインターフェイスの可能性を提供します。 Jsonシリアル化を行うために両方をセットアップすることもできます。

執筆中にWCFクラスを取っているので（実際、休憩中です！）、WCFメソッドをスケッチします。

[OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
public LookupTagCollection LookupTags( int limit, string q )
{
     return Select.AllColumnsFrom<LookupTag>()
                  .Top(limit)
                  .Where(LookupTag.Columns.TagDescription)
                  .Like(q+ "%")
                  .OrderAs(LookupTag.Columns.TagDescription)
                  .ExecuteAsCollection<LookupTagCollection>();    
}

LookupTagCollectionはSerializableである必要があります。

6
tvanfosson

Jquery 1.8 Autocompleteは、クエリ文字列パラメーターとして「q」ではなく「term」を使用します。これは私が実装した短くて甘いバージョンです。これが誰かを助けることを願っています。

Javascript：

$(function () {
    $("#autocomplete").autocomplete({
        source: "/pathtohandler/handler.ashx",
        minLength: 1,
        select: function (event, ui) {
            $(this).val(ui.item.value);
        }
    });
});

ASHXハンドラー：

public class SearchHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var term = context.Request.QueryString["term"].ToString();

        context.Response.Clear();
        context.Response.ContentType = "application/json";

        var search = //TODO implement select logic based on the term above

        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string json = jsSerializer.Serialize(search);
        context.Response.Write(json);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
4
anthonyvscode