wake-up-neo.com

twitter bootstrap autocomplete dropdown / combobox mit knockoutjs

Ich habe eine Anforderung, bei der ich bootstrap Autocomplete Dropdown verwenden MUSS, ABER Benutzer können Freiformtext in diesem Dropdown haben, wenn sie möchten. Bevor Sie über TypeAhead nachdenken, könnte ich Bootstrap TypeAhead-Textfeld, aber ich brauche das Dropdown-Menü, da wir einige Standardwerte als Startoptionen 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/2

Alles, was ich tun musste, war, den Namen vom ausgewählten Steuerelement 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 von meiner Vorlage gerenderten Zeile (Selector) .combobox () auf, wodurch das Auswahlsteuerelement zu einer bootstrap comobobox wird und eine Eingabe hinzugefügt wird Steuerung und versteckt die Auswahlsteuerung in den Kulissen dahinter.

Das Problem ist jetzt, wenn ich versuche, die Werte zum Posten auf den Server zu bringen, da der Wert, den ich in das Eingabefeld eingegeben habe, keine gültigen Optionen aus den Optionen darstellt, die ich zur Auswahl des Steuerelements angegeben habe, wird er standardmäßig immer auf die erste Option gesetzt. Dies liegt daran, dass ich die Bindung des ausgewählten Werts bei der Auswahlsteuerung und nicht bei dem 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.

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

Eine weitere gute Option ist Selectize.js . Bootstrap fühlt sich etwas natürlicher an.

250

Funktioniert der grundlegende HTML5-Datalist? Es ist sauber und Sie müssen nicht mit dem schmutzigen Code von Drittanbietern herumspielen. W3SCHOOL Tutorial

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

21
Juto

Wählen Sie 2 für Bootstrap 3 native Plugin

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

dieses Plugin verwendet das Select2 JQuery Plugin

nuget

PM> Install-Package Select2-Bootstrap

3
Mahesh

Fuel UX combobox hat alle Funktionen, die Sie erwarten würden.

1
Stas Slabko

Kann ich vorschlagen http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html , funktioniert eher wie der Twitter-Beitrag Vorschlag, wo es Ihnen eine Liste von Benutzern oder Themen basierend auf @ oder # Tags gibt,

demo hier ansehen: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

in diesem Fall können Sie das @ und das # ganz einfach nach Belieben ändern

1
user4237179

Bootstrap Tokenfield scheint auch gut zu sein: http://sliptree.github.io/bootstrap-tokenfield/

0
Spaceploit