Verwenden Sie mithilfe von Typeahead einen anderen Wert aus JSON-Daten anstelle von displayKey
Lesezeit: 6 Minuten
Benutzer1779796
Ich habe begonnen, Typeahead.js zu verwenden, und kämpfe darum, einen Weg zu finden, wie es einem Benutzer ermöglicht wird, einen Firmennamen einzugeben und zu suchen, nachdem er den zugehörigen Firmencode eingegeben hat.
Derzeit zeigt dies nur die Liste der Codes an, wenn der Benutzer in das Eingabefeld tippt. Ich würde jedoch gerne wissen, ob es eine Möglichkeit gibt, ihnen die Suche zu ermöglichen code aber einmal ausgewählt, der Wert in der Textbox zu sein company_name? Ist das mit diesem Plugin überhaupt möglich? Jede Hilfe wird sehr geschätzt.
Vielen Dank!
Können Sie Ihre Datenstruktur ändern?
– Tomanow
19. Februar 2014 um 23:44 Uhr
@Tomanow Ja sicher. Ich dachte nur, diese Struktur wäre effizient. Vielen Dank
– Benutzer1779796
19. Februar 2014 um 23:45 Uhr
Ich habe gerade meine Antwort aktualisiert. Jetzt soll es genauer werden.
– Tomanów
20. Februar 2014 um 0:38 Uhr
Esseb
displayKey wird verwendet, um anzugeben, welche Taste in der Dropdown-Liste angezeigt werden soll und im Eingabefeld, nachdem der Benutzer einen Eintrag ausgewählt hat.
Wenn Sie möchten, dass die Einträge in der Dropdown-Liste angezeigt werden anders von dem, was im Eingabefeld landet, müssen Sie eine benutzerdefinierte Vorlage verwenden.
suggestion – Wird verwendet, um einen einzelnen Vorschlag zu rendern. Wenn gesetzt, muss es sich um ein vorkompiliertes Template handeln. Als Kontext dient das zugehörige Vorschlagsobjekt. Standardmäßig auf den Wert von displayKey eingewickelt in ein p Etikett dh <p>{{value}}</p>.
Die eingereichte Vorlage wird zum Anzeigen verwendet stock.code in der Dropdown-Liste, während stock.company_name wird im Eingabefeld angezeigt, nachdem der Benutzer einen Eintrag ausgewählt hat.
Ich bin kein jQuery / JavaScript-Guru. Also ich bevorzuge den einfachen Weg. Nur um zu verstehen, was ich getan habe, wenn ich mir später meinen Code ansehe …
Dank an Eric Saupe Ich habe eine clevere Lösung gefunden:
Sie möchten auch ‘typeahead:autocompleted’ behandeln.
– Alok
28. April 2015 um 20:24 Uhr
Scheint die beste Lösung zu sein, aber das JSFIDDLE funktioniert nicht mehr. Beim Anklicken schreibt es den ganzen Firmennamen.
– NLemay
13. Mai 2016 um 15:16 Uhr
Ist es typeahead:selected oder typeahead:select? Offizielle Dokumente sagen letzteres. So oder so konnte ich das Ereignis nicht auslösen. Ich fügte hinzu alert(data.code); zu deiner Geige und es feuerte auch nicht. Was sollte der richtige Weg sein?
– Alte Knacker
1. Mai 2017 um 3:45 Uhr
Das JSFIDDLE funktioniert wie erwartet für mich. Getestet habe ich mit Firefox und Chrome. Ich kann nicht sagen, ob es :s selected oder :select ist. Bei mir hat es mit :s selected funktioniert Inzwischen bin ich auf jQuery Typeahead umgestiegen (runningcoder.org/jquerytypeahead/documentation). Es ist gut dokumentiert und funktionsreich und die Konfiguration ist einfacher (imho).
– Tobse
4. Mai 2017 um 9:18 Uhr
Auch nach Gebrauch setTimeout Methode wie: setTimeout(function() { $('.typeahead').val(data.code); }, 1);, es änderte den Wert beim Verlassen des Eingabefelds zurück. Also musste ich auf die vorlagenbasierte Lösung von @Esseb umsteigen.
– Rehmat
31. März 2019 um 4:40 Uhr
Sie müssen die Variable „displayKey“ verwenden. Siehe unten Kopieren und Einfügen aus den Textvervollständigungsdokumenten:
displayKey – Bestimmt für ein gegebenes Vorschlagsobjekt dessen Zeichenfolgendarstellung. Dies wird verwendet, wenn der Wert des Eingabesteuerelements festgelegt wird, nachdem ein Vorschlag ausgewählt wurde. Kann entweder eine Schlüsselzeichenfolge oder eine Funktion sein, die ein Vorschlagsobjekt in eine Zeichenfolge umwandelt. Standardmäßig auf value.
Ihr spezifischer Code würde dann ungefähr so aussehen:
var stocks = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.code); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 3,
prefetch: {
url: 'javascripts/stockCodes.json',
filter: function(list) {
// This should not be required, but I have left it incase you still need some sort of filtering on your server response
return $.map(list, function(stock) { return { code: stock.code, company_name: stock.company_name }; });
}
}
});
stocks.initialize();
$('.typeahead').typeahead(null, {
name: 'stocks',
displayKey: function(stock) {
return stock.company_name;
},
source: stocks.ttAdapter()
});
Ich hatte eine sehr ähnliche Anforderung auf meiner eigenen Website, und ich hatte diese Arbeit ohne Probleme. Ich habe dieses spezielle Beispiel jedoch nicht ausprobiert. Lassen Sie mich wissen, ob es funktioniert.
Denken Sie daran, anzurufen stocks.clearPrefetchCache(); um Ihren Cache zu löschen, um Fehler leichter zu verfolgen.
Tomanow
Wenn ich richtig gelesen habe, glaube ich, dass Sie das wollen:
var stocksData = [{
"Facebook": "fb",
}, {
"Google": "goog",
}, {
"Yahoo": "yhoo",
}, {
"Apple": "aapl",
}, {
"Royal Mail": "rmg.l",
}, ];
var stocks = new Bloodhound({
datumTokenizer: function (d) {
for (var prop in d) {
return Bloodhound.tokenizers.whitespace(d[prop]);
}
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 3,
local: stocksData,
});
stocks.initialize();
$('input').typeahead(null, {
name: 'stocks',
displayKey: function(stocks) {
for (var prop in stocks) {
return prop;
}
},
source: stocks.ttAdapter()
});
Natürlich möchten Sie das lokale in prefetch/remote ändern, wie Sie es für die json-Datei getan haben.
Hatte das gleiche Problem, konnte es mit der Eigenschaft display oder displayKey nicht zum Laufen bringen. Umgangen, indem den Quellobjekten die Name-Eigenschaft hinzugefügt wurde:
$.each(stocks, function (i, item) {
item.name = item.company_name;
});
ArtisanBay
Fügen Sie den Wert hinzu, der in angezeigt werden muss Anzeige Parameter:
Können Sie Ihre Datenstruktur ändern?
– Tomanow
19. Februar 2014 um 23:44 Uhr
@Tomanow Ja sicher. Ich dachte nur, diese Struktur wäre effizient. Vielen Dank
– Benutzer1779796
19. Februar 2014 um 23:45 Uhr
Ich habe gerade meine Antwort aktualisiert. Jetzt soll es genauer werden.
– Tomanów
20. Februar 2014 um 0:38 Uhr