Completamento automatico jQuery 1.8-UI JSON Format

Question

Sto giocando con il nuovo completamento automatico in jQuery 1.8-UI. Ho fornito i dati nel seguente formato

["val1", "val2", "val3"]

Questo è proveniente da una procedura immagazzinata ma uscita come una stringa. Per qualche ragione questo non funziona affatto, tuttavia, se fornisco gli stessi dati utilizzando una variabile javascript

var data = ["val1", "val2", "val3"];

Quindi questo funziona bene.

<script type="text/javascript">
  $(function()
    $("#txtClient").autocomplete({
      source: "/intranet/common/scripts/IntranetLists.aspx?ListType=C"
    });
  });
</script>

Ho una pagina che fornisce qualsiasi dati che voglio utilizzare stringhe di query. E 'più temporanea, ma ha funzionato quando ho usato in precedenza di bassistence autocomplete .

Tutte le idee?

---

Modifica

La fonte emette semplicemente una voce su righe separate. Ora l'uscita lo fa con il formato JSON. Quello che non capisco è come l'ingresso fornisce i dati come una query per l'origine dei dati. Come ho detto, sto usando uno script che dovrebbe vengono chiamati ogni volta che entro in una nuova chiave.

Ecco il codice che ho (prendere in considerazione questo ha funzionato bene con un plug-in di terze parti di completamento automatico)

<%
  Dim MyCmd As New dbExact("proc_Intranet_Lists")
  MyCmd.cmd.Parameters("@List").Value = Request.QueryString("ListType")
  If Request.QueryString("Top") <> Nothing Then
    MyCmd.cmd.Parameters("@Top").Value = Request.QueryString("Top")
  End If
  MyCmd.cmd.Parameters("@Code").Value = Request.QueryString("term")
  MyCmd.cmd.Connection.Open()

  Dim results As New StringBuilder()
  results.Append("[")
  Dim dr As SqlDataReader = MyCmd.cmd.ExecuteReader
  If dr.HasRows Then
    While dr.Read
      results.AppendLine("'" + dr(0).ToString() + "',")
    End While
  Else
    results.Append("None Found")
  End If
  results.Remove(results.Length - 2, 2)
  results.Append("]")
  Response.Write(results.ToString())
  results = Nothing
  MyCmd.cmd.Connection.Close()
  MyCmd = Nothing
%>

La documentazione per la nuova autocomplete non dice da nessuna parte che la stringa di query passata è in realtà chiamato "termine" (che ho trovato fuori dal file search.php). Sto facendo questo in VB.NET.

Answer 1

Realisticamente, dovrei scrivere un tutorial per questo perché non c'è molta documentazione in giro. Se si desidera utilizzare le nuove Autocomplete di jQuery in jQuery UI 1.8, allora ecco come si fa.

Personalmente, ho usato un gestore di rete generico. Sono sotto l'ipotesi questi sono migliori perché non passare attraverso la normale richiesta di pipeline e invece hanno solo due "elementi", una proprietà, e un sub-routine chiamata ProcessRequest.

Il modo in cui lo faccio è che ho scritto una stored procedure che prende impostare gli argomenti per determinare cosa di completamento automatico che voglio. Ad esempio, se voglio usare l'autocompletamento per elencare alcuni paesi, o io voglio usarlo per elencare i nomi dei dipendenti, poi mi passa una certa stringa di query per determinare cosa Voglio indietro. Questo rende molto flessibile.

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

Sono sicuro che ci sono molti altri modi per farlo, ma questo è proprio quello che ha funzionato per me. Io uso l'AutocompleteItem CDT perché le variabili denominate sono ciò che sono utilizzati in Autocomplete di jQuery. Per impostazione predefinita, utilizza id e value. È possibile specificare qualsiasi altra cosa che vuoi, ma poi si deve andare e formattare i tuoi articoli voi stessi utilizzando gli eventi previsti in jQuery.

Per fortuna .NET consente di serializzare i dati, ma è possibile farlo in PHP e usando json_encode. È possibile trovare l'esempio PHP nell'interfaccia utente scaricare jQuery.

Infine, ecco la jQuery che ho usato. Ho un ritardo pari a zero perché è un veloce, server locale.

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

Speriamo che questo vi aiuterà a quando si utilizza jQuery UI 1.8 di completamento automatico.

Modifica Se qualcuno ha qualche raccomandazioni su come migliorare il gestore generica, sentitevi liberi di showo me. Ho notato che sto ri-istanziare l'oggetto AutocompleteItem di volta in volta, se non si esegue questa operazione manterrà i vecchi valori per qualche ragione, nonostante la ri-inizializzare le variabili con i nuovi valori. Cin cin.

Answer 2

Ho trovato il formato JSON piuttosto semplice. È possibile controllare le risposte a Firebug utilizzando la demo in questa pagina: http: // jQueryUI. com / demo / completamento automatico / # evento-change .. ecco un esempio:

[ 
{ "id": "Erithacus rubecula", "label": "European Robin", "value": "European Robin" }, 
{ "id": "Cercotrichas galactotes", "label": "Rufous-Tailed Scrub Robin", "value": "Rufous-Tailed Scrub Robin" }, 
{ "id": "Irania gutturalis", "label": "White-throated Robin", "value": "White-throated Robin" }, 
{ "id": "Turdus migratorius", "label": "American Robin", "value": "American Robin" }
]

Answer 3

Il tuo esempio non è abbastanza davvero chiaro. Ma se si usa PHP per riempire le variabili di completamento automatico vorrei solo eco nel javascript:

Js:

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

PHP

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

Ma non sono sicuro se questa è la risposta che state cercando.

Answer 4

$( "#someid" ).autocomplete({
     source: "something.php(aspx)?param1=param1&param2=param2&param3=param3",
     minLength: 1,
     select: function( event, ui ) {
         alert( "value: " + ui.item.value + " , id: " + ui.item.id );
     }
});