StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Realistically, I should write a tutorial up for this because there's not much documentation around. If you want to use jQuery's new Autocomplete in jQuery-UI 1.8 then here's how you do it.</p> <p>Personally, I used a generic web handler. I'm under the assumption these are better because they don't go through the regular request pipeline and instead only have two "elements", a property, and a sub-routine called <code>ProcessRequest</code>.</p> <p>The way I do it is I've written a stored procedure which takes set arguments to determine <em>what</em> autocomplete I want. For example, if I want to use the autocompleter to list some countries, or I want to use it to list the names of employees, then I pass a certain query string to determine <em>what</em> I want back. This makes it very flexible.</p> <pre><code><%@ WebHandler Language="VB" Class="Autocomplete" %> Imports System Imports System.Web Imports System.Collections.Generic Imports System.Web.Script.Serialization Public Class Autocomplete : Implements IHttpHandler Public Class AutocompleteItem Public id As String Public value As String End Class Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest context.Response.ContentType = "text/plain" Dim conn As New SqlConnection(ConfigurationManager.ConnectionStrings("YourConnectionString").ToString) Dim cmd As New SqlCommand("YourStoredProcedure", conn) cmd.CommandType = CommandType.StoredProcedure With cmd.Parameters .Add(New SqlParameter("@List", 22, 10, 1, False, 0, 0, "", 512, context.Request.QueryString("ListType"))) .Add(New SqlParameter("@Code", 22, 12, 1, False, 0, 0, "", 512, context.Request.QueryString("term"))) .Add(New SqlParameter("@Top", 16, 0, 1, False, 0, 0, "", 512, context.Request.QueryString("Top"))) End With conn.Open() Dim results As New StringBuilder() Dim dr As SqlDataReader = cmd.ExecuteReader Dim items As New List(Of AutocompleteItem) Dim serializer As New JavaScriptSerializer() While dr.Read Dim autocomplete As New AutocompleteItem autocomplete.id = dr(0) autocomplete.value = dr(1) items.Add(autocomplete) End While Dim arrayJson As String = serializer.Serialize(items) context.Response.Write(arrayJson) conn.Close() End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class </code></pre> <p>I'm sure there's many other ways of doing this, but this is just what worked for me. I use the AutocompleteItem CDT because the named variables are what are used in jQuery's Autocomplete. By default, it uses <code>id</code> and <code>value</code>. You can specify anything else you want, but then you have to go and format your items yourself using the events provided in jQuery.</p> <p>Fortunately .NET lets you serialize the data, but you can do so in PHP as well using <code>json_encode</code>. You can find the PHP example in the jQuery UI download.</p> <p>Finally, here's the jQuery I used. I have a zero delay because it's a fast, local server.</p> <pre><code><script type="text/javascript"> $(function() { $("#txtClient").autocomplete({ source: "/intranet/common/scripts/Autocomplete.ashx?ListType=Addresses", minLength: 2, delay: 0 }); }); </script> </code></pre> <p>Hopefully this will help you when using jQuery UI 1.8's Autocomplete.</p> <p><strong>EDIT</strong> <em>If anyone has any recommendations on how to improve the generic handler, feel free to showo me. I notice I'm re-instantiating the AutocompleteItem object each time, however if you don't do this it will keep the old values for some reason, despite re-initializing the variables with new values. Cheers.</em></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload