Combobox Javascript con elementi typeahead e gerarchici

Question

Desidero creare una casella combinata con un elenco gerarchico di elementi. Devo essere in grado di selezionare gli elementi padre e i bambini individualmente. Devo anche essere in grado di fornire funzionalità tipeahead per questa casella combinata.

Per esempio, voglio fare una casella combinata con questi dati in JS:

Canada

--Ontario

--Quebec

USA

--Massachusetts

--Ohio

--Texas

Da questo menu a discesa che voglio essere in grado di selezionare una qualsiasi delle province/singoli Stati. Voglio anche essere in grado di selezionare "Canada" senza selezionare i suoi figli.

Ho provato Select2 e ho scavato attorno all'interfaccia utente di JQuery per vedere se è possibile, ma finora non riesco a ottenere il comportamento che mi serve. Sto scrivendo questa pagina usando bootstrap, ma il dato typeahead in boostrap non sembra funzionare con le combobox (che posso vedere).

Answer 1

È possibile utilizzare il plugin josen per questo. http://harvesthq.github.com/chosen/

Answer 2

È possibile memorizzare oggetti JS personalizzati per ogni risultato di tipo typeahead in modo che possa visualizzare e memorizzare più di una semplice stringa (un tipo o un ID, ad esempio). Usarlo ti permetterebbe di avere una logica diversa per paese vs provincia/stato. Ecco un esempio di fare così:

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

Così nella funzione di aggiornamento, si potrebbe avere la logica, sulla base di oggetto personalizzato per determinare se si tratta di un genitore o un figlio che è stato fatto clic.

Per quanto riguarda il fatto che il genitore abbia un aspetto diverso da quello del bambino, non l'ho usato da solo, ma c'è un sistema di template in bootstrap. Dai un'occhiata a questo collegamento per un esempio:

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

Si potrebbe probabilmente utilizzare questo per differenziare l'aspetto genitore e figlio e si sentono.