Autocomplete jQuery 1.8-UI JSON-Format

Realistisch, ich sollte schreiben Sie ein tutorial für diese, denn es gibt nicht viel Dokumentation. Wenn Sie jQuery verwenden möchten neue AutoVervollständigen-in jQuery-UI-1.8 dann hier ist, wie Sie es tun.

Persönlich habe ich eine generische web-handler. Ich bin unter der Annahme, dass diese besser sind, weil Sie nicht über den regulären Anfrage "pipeline" und stattdessen nur zwei "Elemente", eine Eigenschaft, und eine sub-routine aufgerufen ProcessRequest.

Die Art, wie ich es ist die ich geschrieben habe, eine gespeicherte Prozedur, die dauert-set Argumente, um zu bestimmen was AutoVervollständigen-ich will. Zum Beispiel, wenn ich verwenden möchten, der autocompleter Liste einiger Länder, oder ich möchte es verwenden, um die Liste mit den Namen der Mitarbeiter, dann gebe ich einen bestimmten query-string zu ermitteln was ich will zurück. Dies macht es sehr flexibel.

<%@ 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

Ich bin sicher, es gibt viele andere Wege, dies zu tun, aber das ist nur was für mich gearbeitet. Ich benutze die AutocompleteItem CDT, weil die benannten Variablen sind das, was verwendet werden, in die jQuery-Autocomplete. Standardmäßig verwendet es id und value. Sie können angeben, alles, was Sie wollen, aber dann haben Sie zu gehen und formatieren Sie Ihre Gegenstände selbst über die Ereignisse in jQuery.

Glücklicherweise .NET können Sie serialisieren der Daten, aber Sie können dies tun, in PHP als auch mit json_encode. Finden Sie die PHP-Beispiel in der jQuery UI herunterladen.

Schließlich, hier ist die jQuery die ich verwendet habe. Ich habe eine null-Verzögerung, weil es eine schnelle, lokale server.

<script type="text/javascript">
    $(function() {
      $("#txtClient").autocomplete({
        source: "/intranet/common/scripts/Autocomplete.ashx?ListType=Addresses",
        minLength: 2,
        delay: 0
      });
    });
</script>

Hoffentlich hilft Sie bei der Verwendung von jQuery UI 1.8 ist AutoVervollständigen.

BEARBEITEN Wenn jemand irgendwelche Empfehlungen zur Verbesserung der generische handler, fühlen Sie sich frei, um showo mir. Ich merke, ich bin re-instanziieren der AutocompleteItem Objekt, aber jedes mal, wenn Sie dies nicht tun, wird es halten Sie die alt-Werte für einige Grund, trotz re-initialisieren Sie die Variablen mit neuen Werten. Cheers.

Dein Beispiel ist nicht wirklich klar genug. Aber wenn Sie php verwenden, um füllen Sie das AutoVervollständigen-Variablen, ich würde nur echo im javascript:

Js:

var data = <?php echo $autocomplete ?>;

PHP

$autocomplete = '["val1", "val2", "val3"]';

Aber ich bin mir nicht sicher, ob dies die Antwort, die Sie suchen.