Lift - Autocomplete mit Ajax Submission

8

Ich möchte eine automatische Vervollständigung mit Ajax verwenden. Also mein Ziel ist es zu haben:

  • Wenn der Benutzer etwas in das Textfeld eingibt, erscheinen einige Vorschläge des Servers (ich muss Vorschläge in einer Datenbank finden)

  • Wenn der Benutzer auf "enter" klickt, auf eine andere Stelle als in der Autocomplete-Box klickt oder wenn er einen Vorschlag auswählt, wird die Zeichenfolge im Textfeld an den Server gesendet.

Ich habe zuerst versucht, das Autocomplete-Widget von lift zu verwenden, aber ich hatte drei Probleme:

  • es ist eine erweiterte Auswahl, das heißt, Sie können ursprünglich nur vorgeschlagene Werte übermitteln.
  • es ist nicht zur Verwendung mit Ajax gedacht.
  • es wird fehlerhaft, wenn es mit WiringUI kombiniert wird.

Meine Frage lautet also: Wie kann ich jquery autocomplete kombinieren und mit dem Server in lift interagieren? Ich denke, ich sollte einige Rückrufe verwenden, aber ich beherrsche sie nicht.

Vielen Dank im Voraus.

UPDATE Hier ist eine erste Implementierung, die ich ausprobiert habe, aber der Callback funktioniert nicht:

%Vor%

Also meine Idee war:

  • um das ausgewählte Ergebnis über ein SHtml.ajaxText -Feld zu erhalten, das in ein Autocomplete-Feld
  • gepackt werden würde
  • um die Vorschläge zur automatischen Vervollständigung mithilfe einer JavaScript-Funktion zu aktualisieren
Christopher Chiche 06.04.2012, 11:58
quelle

2 Antworten

8

Hier ist was Sie tun müssen.

1) Stellen Sie sicher, dass Sie Lift 2.5-SNAPSHOT verwenden (dies ist in früheren Versionen möglich, ist aber schwieriger)

2) Verwenden Sie im Snippet, mit dem Sie die Seite rendern, SHtml.ajaxCall (insbesondere möchten Sie diese Version wahrscheinlich: Ссылка ), mit dem Sie eine serverseitige Funktion registrieren können, die Ihren Suchbegriff akzeptiert und eine JSON-Antwort zurückgibt, die enthält die Ergänzungen. Sie werden auch eine Aktion für die JSON-Antwort mit dem JsContext registrieren.

3) Der obige ajaxCall gibt ein JsExp-Objekt zurück, das beim Aufruf zu einer Ajax-Anfrage führt. Betten Sie es mithilfe Ihres Snippets in eine JavaScript-Funktion auf der Seite ein.

4) Verdrahten Sie sie mit einer Clientseite JS.

Update - Ein Code, der Ihnen hilft. Mit Lift 2.5 kann es definitiv prägnanter gemacht werden, aber aufgrund einiger Inkonsistenzen in 2.4 habe ich meine eigene ajaxCall-ähnliche Funktion erstellt. S.fmapFunc registriert die Funktion auf der Serverseite und der Funktionskörper führt einen Lift-Ajax-Aufruf vom Client aus und ruft dann die res-Funktion (die von jQuery-Autocomplete kommt) für die JSON-Antwort auf.

Mein jQuery-Plugin zum "Aktivieren" der Texteingabe

%Vor%

Mein Scala-Code, der in der JavaScript-Suchfunktion resultiert:

%Vor%

Update 2 - Um die obige Funktion zu Ihrer Seite hinzuzufügen, verwenden Sie eine CssSelector-Transformation ähnlich der folgenden. Das & gt; * bedeutet, an alles anzufügen, was bereits in dem übereinstimmenden Skriptelement existiert. Ich habe andere Funktionen, die ich auf dieser Seite definiert habe, und fügt ihnen die Suchfunktion hinzu.

%Vor%

Sie können die Quelle anzeigen, um zu überprüfen, ob sie auf der Seite vorhanden ist und wie jede andere JS-Funktion aufgerufen werden kann.

    
Dave Whittaker 06.04.2012, 16:00
quelle
2

Mit Hilfe von Dave Whittaker, hier ist die Lösung, mit der ich gekommen bin.

Ich musste einige Verhaltensweisen ändern, um zu bekommen:

  • der gewünschte Text (aus Autocomplete oder nicht) in einem AjaxText-Element
  • die Möglichkeit, mehrere Autovervollständigungsformulare auf derselben Seite zu haben
  • Senden Sie die Antwort auf ajaxText vor der Unschärfe, wenn in Autocomplete-Vorschlägen etwas ausgewählt ist.

Scala-Teil

%Vor%

In die Kopfzeile einzufügendes Skript:

%Vor%

Hinweis: Ich habe Dave's Antwort akzeptiert, meine ist nur, um eine vollständige Antwort für meinen Zweck zu geben

    
Christopher Chiche 17.04.2012 08:12
quelle

Tags und Links