Twitter Bootstrap Autocomplete Dropdown / Combobox mit Knockoutjs

114

Ich habe eine Anforderung, bei der ich das Bootstrap-Dropdown-Menü für die automatische Vervollständigung verwenden muss. Der Benutzer kann jedoch Freiformtext in diesem Dropdown-Menü haben, wenn er dies wünscht. Bevor Sie über TypeAhead nachdenken, könnte ich das Textfeld Bootstrap TypeAhead verwenden, aber ich brauche das Dropdown-Menü, da wir einige Standardwerte als Headstart-Optionen angeben möchten, falls Benutzer nicht wissen, wonach sie suchen sollen.

Ich verwende dies mit MVC DropDownListFor, da dies ein ausgewähltes Steuerelement für uns erstellt.

Ich habe diesen Artikel gefunden, der das für mich erledigt.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

Alles, was ich tun musste, war, den Namen vom Auswahlsteuerelement zu entfernen, und das Steuerelement ließ mich Freiformtext eingeben. Alles gut soweit.

Jetzt benutze ich dies in Verbindung mit Knockoutjs. Ich binde meine Optionen und den ausgewählten Wert an das Auswahlsteuerelement und rufe dann in der Zeile meiner Vorlage (Selektor) .combobox () auf, wodurch das Auswahlsteuerelement zu einer Bootstrap-Comobobox wird, ein Eingabesteuerelement hinzugefügt und das Auswahlsteuerelement in den Szenen ausgeblendet wird hinter.

Das Problem ist jetzt, wenn ich versuche, die Werte zum Posten auf dem Server zu bringen, da der Wert, den ich in das Eingabefeld eingegeben habe, keine gültigen Optionen aus den Optionen ist, die ich zur Auswahl des Steuerelements angegeben habe, sondern standardmäßig immer auf die erste Option gesetzt wird. Dies liegt daran, dass ich die Bindung des ausgewählten Werts im Auswahlsteuerelement und nicht im Eingabefeld festgelegt habe, das von bootstrap-combobox.js erstellt wurde.

Meine Frage ist, wie ich das Eingabefeld dazu bringe, Daten an dieselbe Eigenschaft zu binden, an die das Auswahlsteuerelement gebunden war.

Irgendwelche anderen Optionen? Lassen Sie mich wissen, wenn Sie weitere Erläuterungen benötigen oder Fragen haben. Bitte vorschlagen.

Vielen Dank.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
quelle
Ich habe eine Lösung für meine Situation gefunden. Ich habe das Textfeld TypeAhead anstelle der Comobox Autocomplete verwendet und die Dropdown-Liste der Optionen standardmäßig angezeigt, wenn sich Benutzer auf das Steuerelement konzentrierten oder auch auf die Schaltfläche drücken. Auf diese Weise wissen sie, wonach sie suchen können, was meine Hauptanforderung war.
Krishna Teja Veeramachaneni

Antworten:

254

Schauen Sie sich Select2 für Bootstrap an . Es sollte in der Lage sein, alles zu tun, was Sie brauchen.

Eine weitere gute Option ist Selectize.js . Es fühlt sich für Bootstrap etwas nativer an.

Arnold Daniels
quelle
27
Wie haben Sie Select2 verwendet, um Texteingaben zuzulassen, die nicht bereits in der Datenquelle enthalten waren?
Compcentral
4
Wie @compcentral richtig erwähnt, erlaubt Ihnen Select2 NICHT, etwas einzugeben, das nicht in der Optionsliste enthalten ist. Die Verwendung der (automatischen) Markierungsfunktion, um dies zu simulieren, ist umständlich, da kein Text mit Leerzeichen darin akzeptiert wird.
Stas Slabko
2
Was für ein guter Fund! Am Ende habe ich Selectize verwendet, da es eher Bootstrap-artig erscheint.
Steven
1
Aufgrund des von @compcentral und Stas angesprochenen Problems habe ich mich für selectize.js entschieden.
Neil Monroe
1
@compcentral Warum verwenden Sie nicht die Remote-Datenquellenmethode?
Clain Dsilva
23

Funktioniert die grundlegende HTML5-Datenliste? Es ist sauber und Sie müssen nicht mit dem unordentlichen Code von Drittanbietern herumspielen. W3SCHOOL Tutorial

Die MDN-Dokumentation ist sehr beredt und enthält Beispiele.

Juto
quelle
3
Das Hauptproblem bei HTML 5 datalistist, dass es keine DOM-Ereignisse unterstützt. Jedes Mal, wenn Sie einen Wert auswählen, müssen Sie das entsprechende Textfeld verlassen
Pawan
@Pawan Das stimmt nicht mehr (mehr?). Die mit der Datenliste verknüpfte Eingabe löst Änderungen aus und gibt zumindest Ereignisse ein. Schauen Sie hier , sowohl Änderungs- als auch Eingabeereignisse lösen ein Konsolenprotokoll aus.
Félix Gagnon-Grenier
1
In all diesen Jahren. In all den Jahren wurde mit Bibliotheken von Drittanbietern herumgespielt, anstatt mit einer einfachen und sauberen, bereits unterstützten Lösung ...
Félix Gagnon-Grenier
3

Select2 für das native Bootstrap 3-Plugin

https://fk.github.io/select2-bootstrap-css/index.html

Dieses Plugin verwendet das Select2 JQuery Plugin

Nuget

PM> Install-Package Select2-Bootstrap

Mahesh
quelle
1
Hallo. Gibt es hier einen Unterschied zur ersten positiv bewerteten Antwort? Sie duplizieren den Vorschlag für Auswahl 2, soweit ich sehen kann?
Félix Gagnon-Grenier
1

Die Fuel UX Combobox bietet alle Funktionen, die Sie erwarten würden.

Stas Slabko
quelle
1
Soweit ich sehen kann, hat es keinen Typeahead.
Jpkeisala