Javascript Combobox mit typeahead und hierarchischen Elementen

Question

Ich möchte eine Combobox mit einer hierarchischen Liste von Elementen erstellen. Ich muss in der Lage sein, die Elternteile sowie die Kinder einzeln auszuwählen. Ich muss auch in der Lage sein, typeahead Fähigkeiten für diese Combobox zur Verfügung zu stellen.

Zum Beispiel möchte ich eine Combobox mit diesen Daten in JS machen:

Kanada

--Ontario

--Quebec

USA

--Massachusetts

- Ohio

--Texas

Von diesem Dropdown möchte ich in der Lage sein, eine der Provinzen/Staaten einzeln auszuwählen. Ich möchte auch "Kanada" auswählen können, ohne seine Kinder auszuwählen.

Ich habe Select2 ausprobiert und habe in JQuery UI gegraben, um zu sehen, ob es möglich ist, aber bis jetzt kann ich nicht ganz das Verhalten erreichen, das ich brauche. Ich schreibe diese Seite mit Bootstrap, aber die angegebene Typehead in Boostrap scheint überhaupt nicht mit Comboboxen zu funktionieren (die ich sehen kann).

Answer 1

Sie können ausgewähltes Javascript-Plugin verwenden, um dies zu erreichen. http://harvesthq.github.com/chosen/

Answer 2

Sie können benutzerdefinierte JS-Objekte für jedes Typheadergebnis speichern, sodass mehr als nur eine Zeichenfolge (z. B. ein Typ oder eine ID) angezeigt und gespeichert werden kann. Wenn Sie das verwenden, können Sie eine unterschiedliche Logik für Land gegen Provinz/Staat haben. Hier ist ein Beispiel dafür:

https://github.com/twbs/bootstrap/pull/3682

So in der Aktualisierungsfunktion, Sie Logik auf der Grundlage Ihres benutzerdefiniertes Objekt haben könnten, um zu bestimmen, ob es ein Elternteil oder ein Kind, das geklickt wurde.

Soweit das Elternteil anders aussieht als das Kind, habe ich es nicht selbst verwendet, aber es gibt ein Template-System im Bootstrap. Schauen Sie sich diesen Link für ein Beispiel:

https://github.com/twbs/bootstrap/issues/2441

Sie könnten wahrscheinlich diese verwenden, um die Eltern und Kind Blick zu unterscheiden und fühlen.