Ich versuche, ein funktionierendes Beispiel für das typeahead- Element des Twitter-Bootstraps zu finden , das einen Ajax-Aufruf ausführt , um das Dropdown-Menü zu füllen.
Ich habe ein vorhandenes Beispiel für die automatische Vervollständigung von JQuerys, in dem die Ajax-URL für und die Verarbeitung der Antwort definiert sind
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Was muss ich ändern, um dies in das Typeahead-Beispiel zu konvertieren?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Ich werde warten, bis das Problem " Unterstützung für Remotequellen für Typeahead hinzufügen " behoben ist.
Antworten:
Bearbeiten: typeahead ist in Bootstrap 3 nicht mehr enthalten. Check out:
Ab Bootstrap 2.1.0 bis 2.3.2 können Sie Folgendes tun:
So verwenden Sie JSON-Daten wie folgt:
Beachten Sie, dass die JSON-Daten vom richtigen MIME-Typ (application / json) sein müssen, damit jQuery sie als JSON erkennt.
quelle
get
stattgetJSON
? Es scheint angemessener.Sie können die BS Typeahead-Gabel verwenden, die Ajax- Aufrufe unterstützt. Dann können Sie schreiben:
quelle
["aardvark", "apple"]
. Ich musste dendataType
Parameter im$.post
Aufruf explizit einstellen . Siehe jQuery.post () .Content-type
Header aufapplication/json
source
Funktion nicht einmal ausgeführt.Ab Bootstrap 2.1.0:
HTML:
Javascript:
Jetzt können Sie einen einheitlichen Code erstellen und "json-request" -Links in Ihren HTML-Code einfügen.
quelle
$(this)[0].$element.data('link')
.this.$element.data('link')
Alle Antworten beziehen sich auf BootStrap 2 typeahead, das in BootStrap 3 nicht mehr vorhanden ist.
Für alle anderen, die hier Regie führen und nach einem AJAX-Beispiel mit dem neuen Post-Bootstrap- Twitter typeahead.js suchen , ist hier ein funktionierendes Beispiel. Die Syntax ist etwas anders:
In diesem Beispiel werden sowohl synchrone (der Aufruf von processSync ) als auch asynchrone Vorschläge verwendet, sodass einige Optionen sofort angezeigt werden und andere hinzugefügt werden. Sie können einfach das eine oder andere verwenden.
Es gibt viele bindbare Ereignisse und einige sehr leistungsstarke Optionen, einschließlich der Arbeit mit Objekten anstelle von Zeichenfolgen. In diesem Fall würden Sie Ihre eigene benutzerdefinierte Anzeigefunktion verwenden, um Ihre Elemente als Text zu rendern.
quelle
["Thing 1","Thing 2"]
oder mit einer benutzerdefinierten Anzeigefunktion ein Array von Objekten gemäß Ihren Anforderungen, z. B.[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
kehre zurück . Jetzt möchte ich zwei Spalten in der Dropdown-Liste typeahead mit id und label anzeigen. Wie kann ich das machen?Ich habe das ursprüngliche typeahead Bootstrap-Plugin mit Ajax-Funktionen erweitert. Sehr einfach zu bedienen:
Hier ist das Github-Repo: Ajax-Typeahead
quelle
JSON
aussehen? Ich bekommeUncaught TypeError: Cannot read property 'length' of undefined
. Ich verwendejson_encode($array)
und sende rechte Header ('Content-Type: application/json; charset=utf-8'
). jquery versionjQuery v1.9.1
Ich habe einige Änderungen an der jquery-ui.min.js vorgenommen:
und füge folgendes CSS hinzu
Funktioniert perfekt.
quelle
Ich benutze diese Methode
quelle
Mit Bootstrap kann man telefonieren. Die aktuelle Version weist keine Probleme mit der Quellaktualisierung auf. Probleme beim Aktualisieren der typeahead-Datenquelle von Bootstrap mit Post-Response , dh die Quelle des einmal aktualisierten Bootstraps kann erneut geändert werden.
Ein Beispiel finden Sie weiter unten:
quelle
Für diejenigen, die nach einer Coffeescript-Version der akzeptierten Antwort suchen:
quelle
Ich habe diesen Beitrag durchgesehen und alles wollte nicht richtig funktionieren und habe schließlich die Bits aus ein paar Antworten zusammengesetzt, sodass ich eine 100% funktionierende Demo habe und sie hier als Referenz einfügen werde - füge sie in eine PHP-Datei ein und stelle sicher, dass sie enthalten sind der richtige Ort.
quelle
Versuchen Sie dies, wenn Ihr Dienst nicht den richtigen Header für den Anwendungs- / JSON-Inhaltstyp zurückgibt:
quelle
UPDATE: Ich änderte meinen Code mit dieser Gabel
Anstatt $ .each zu verwenden, habe ich auch zu $ .map gewechselt, wie von Tomislav Markovski vorgeschlagen
Ich stoße jedoch auf einige Probleme, wenn ich bekomme
Wie Sie in einem neueren Beitrag sehen können, versuche ich hier herauszufinden
Ich hoffe, dieses Update hilft Ihnen weiter ...
quelle
Array.map
stattdessen verwenden$.each
und den Inhalt Ihrer gesamtensuccess
Rückruffunktion durchvar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });
Ich habe weder ein funktionierendes Beispiel für Sie noch eine sehr saubere Lösung, aber lassen Sie mich Ihnen sagen, was ich gefunden habe.
Wenn Sie sich den Javascript-Code für TypeAhead ansehen, sieht er folgendermaßen aus:
Dieser Code verwendet die jQuery-Methode "grep", um ein Element im Quellarray abzugleichen. Ich habe keine Orte gesehen, an denen Sie einen AJAX-Anruf einbinden könnten, daher gibt es dafür keine "saubere" Lösung.
Eine etwas hackige Möglichkeit, dies zu tun, besteht darin, die Funktionsweise der grep-Methode in jQuery zu nutzen. Das erste Argument für grep ist das Quellarray, und das zweite Argument ist eine Funktion, die zum Abgleichen des Quellarrays verwendet wird (beachten Sie, dass Bootstrap den "Matcher" aufruft, den Sie bei der Initialisierung angegeben haben). Sie können die Quelle auf ein Dummy-Array mit einem Element setzen und den Matcher als Funktion mit einem AJAX-Aufruf definieren. Auf diese Weise wird der AJAX-Aufruf nur einmal ausgeführt (da Ihr Quellarray nur ein Element enthält).
Diese Lösung ist nicht nur hackig, sondern leidet auch unter Leistungsproblemen, da der TypeAhead-Code so konzipiert ist, dass er bei jedem Tastendruck nachschlägt (AJAX-Aufrufe sollten eigentlich nur alle paar Tastenanschläge oder nach einer bestimmten Leerlaufzeit erfolgen). Mein Rat ist, es zu versuchen, aber entweder bei einer anderen Autocomplete-Bibliothek zu bleiben oder diese nur für Nicht-AJAX-Situationen zu verwenden, wenn Sie auf Probleme stoßen.
quelle
Versuchen Sie bei der Verwendung von Ajax,
$.getJSON()
anstatt$.get()
Probleme mit der korrekten Anzeige der Ergebnisse zu haben.In meinem Fall habe ich bei meiner Verwendung nur das erste Zeichen jedes Ergebnisses erhalten
$.get()
, obwohl ichjson_encode()
serverseitig verwendet habe .quelle
Ich benutze,
$().one()
um dies zu lösen. Wenn die Seite geladen ist, sende ich Ajax an den Server und warte, bis es fertig ist. Übergeben Sie dann das Ergebnis an die Funktion.$().one()
ist wichtig. Weil typehead.js gezwungen wird, einmal an die Eingabe anzuhängen. Entschuldigung für das schlechte Schreiben.quelle
?>
quelle