jQuery Autocomplete und ASP.NET

Ich suchte überall auf dieser Website und im Internet nach einem guten und einfachen Beispiel für die automatische Vervollständigung mit jQuery und ASP.NET. Ich wollte die von Autocomplete verwendeten Daten mit einem Webservice versehen (und werde das wahrscheinlich als nächstes machen). In der Zwischenzeit habe ich das funktioniert, aber es scheint ein wenig hacky …

Auf meiner Seite habe ich ein Textfeld:

 

Ich verwende jQuery Autocomplete, eingerichtet nach ihrem Beispiel:

     

Hier fängt es an, hacky zu werden … Ich rufe eine Seite anstatt eines Webservice an:

   $(document).ready(function(){ $("#txtSearch").autocomplete('autocompletetagdata.aspx'); });  

In der Seite habe ich ALLE HTML entfernt und habe nur diese (ansonsten werden verschiedene HTML-Bits im Autocomplete-Dropdown angezeigt):

  

Und in meiner autocompletagdata.aspx verwende ich SubSonic, um Daten aus der database abzufragen, zu formatieren und zurückzugeben (ein Datenelement pro Zeile):

 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() .Top(Request.QueryString["limit"]) .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%") .OrderAsc(LookupTag.Columns.TagDescription) .ExecuteAsCollection(); StringBuilder sb = new StringBuilder(); foreach (LookupTag tag in tags) { sb.Append(tag.TagDescription).Append("\n"); } Response.Write(sb.ToString()); } 

Wenn Sie keine LIKE-Abfrage ausführen, gibt es alles zurück, was eine Übereinstimmung für die von Ihnen eingegebenen Zeichen enthält. Wenn Sie beispielsweise “a” eingeben, wird “Ask” und “Answer” sowie “March” und “.” “Mega.” Ich wollte nur, dass es mit einem Match beginnt.

Wie auch immer, es funktioniert und es ist ziemlich einfach einzurichten, aber gibt es einen besseren Weg?

Ich habe kürzlich Autocomplete implementiert, und es sieht ziemlich ähnlich aus. Ich benutze ein Ashx (Generic Handler) anstelle des Aspx, aber es ist im Grunde der gleiche Code im Code dahinter.

Mit dem Ashx wird es in etwa so aussehen:

  [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() .Top(context.Request.QueryString["limit"]) .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%") .OrderAsc(LookupTag.Columns.TagDescription) .ExecuteAsCollection(); foreach (LookupTag tag in tags) { context.Response.Write(tag.TagDescription + Environment.NewLine); } } public bool IsReusable { get { return false; } } } 

Ich habe dies gerade auf eine andere Frage gepostet, aber Sie können die Analysefunktion des jQuery-Plug-Ins für die automatische Vervollständigung überschreiben, um die Ausgabe zu unterstützen.

Beispiel:

  $("#< %= 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" }); 

All das erwartet ein String-Array zu XML … Sehr einfach zu tun … Wenn Sie SubSonic verwenden, sollten Sie den RESTHandler (Es ist ein verstecktes GEM !!!) ausprobieren, es unterstützt grundlegende Abfragen auf all Ihren Objekten und kann gib JSON / XML zurück. Hier ist eine Beispielabfrage, die es verwendet …

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

Wenn Sie list.xml in list.json ändern, werden die Ergebnisse in JSON geändert. Die obige Anfrage gibt die stark typisierte Entität “Kunde” zurück. Sie können den Parameter ändern, um LIKE, NOT LIKE usw. zu unterstützen. Sehr leistungsfähig und alle Klempnerarbeiten sind erledigt …

Hier ist ein Video: http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

Der Webdienst oder ein WCF-Dienst bietet Ihnen das Potenzial für eine bessere Schnittstelle. Beide können auch für die JSN-Serialisierung eingerichtet werden.

Da ich während des Schreibens eine WCF-class nehme (ich bin gerade in einer Pause!), Skizziere ich die WCF-Methode.

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

LookupTagCollection muss serialisierbar sein.

Jquery 1.8 Autocomplete verwendet “term” nicht “q” als querystring param. Dies ist die kurze und süße Version, die ich implementiert habe. Hoffe, das hilft jemandem.

Javascript:

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

ASHX Handler:

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