twitter bootstrap autocompletamento elenco a discesa / combobox con Knockoutjs


114

Ho un requisito in cui DEVO utilizzare il menu a discesa di completamento automatico bootstrap, MA l'utente può avere un testo in formato libero in quel menu a discesa se lo desidera. Prima di pensare a TypeAhead, potrei usare la casella di testo Bootstrap TypeAhead, ma ho bisogno del menu a discesa perché vogliamo fornire alcuni valori predefiniti come opzioni di avvio principale nel caso in cui gli utenti non sappiano cosa cercare.

Lo sto usando con MVC DropDownListFor in quanto crea un controllo di selezione per noi.

Ho trovato questo articolo che lo fa per me.

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

Tutto quello che dovevo fare era togliere il nome dal controllo di selezione e il controllo mi permetteva di inserire un testo in formato libero. Finora tutto bene.

Ora, lo sto usando insieme a Knockoutjs. Associo le mie opzioni e il valore selezionato al controllo di selezione e quindi sulla riga renderizzata del mio modello, ho chiamato (selector) .combobox () che rende il controllo di selezione un comobobox bootstrap e aggiunge un controllo di input e nasconde il controllo di selezione nelle scene dietro a.

Il problema ora è quando provo a ottenere i valori da pubblicare sul server, poiché il valore che ho inserito nella casella di input non è un'opzione valida dalle opzioni che ho dato per selezionare il controllo, lo imposta sempre sulla prima opzione per impostazione predefinita. Ciò è dovuto al fatto che ho impostato l'associazione del valore selezionato sul controllo di selezione e non sulla casella di input che è stata creata da bootstrap-combobox.js.

La mia domanda è come faccio a ottenere la casella di input per il data-bind alla stessa proprietà a cui era associato il controllo di selezione.

Eventuali altre opzioni ?? Fammi sapere se hai bisogno di ulteriori chiarimenti o hai domande. Per favore suggerisci.

Grazie.


Ho trovato una soluzione per la mia situazione. Ho usato la casella di testo TypeAhead invece della casella combinata Completamento automatico e ho mostrato il menu a discesa delle opzioni per impostazione predefinita quando gli utenti si concentravano sul controllo o premevano anche il pulsante. In questo modo, sanno cosa possono cercare che era il mio requisito principale.
Krishna Teja Veeramachaneni

Risposte:


254

Dai un'occhiata a Select2 per Bootstrap . Dovrebbe essere in grado di fare tutto ciò di cui hai bisogno.

Un'altra buona opzione è Selectize.js . Sembra un po 'più nativo di Bootstrap.


27
Come hai utilizzato Select2 per consentire l'inserimento di testo che non era già incluso nell'origine dati?
compcentral

4
Come citato correttamente da @compcentral, Select2 NON PERMETTE di inserire tutto ciò che non è nella lista delle opzioni. L'uso della funzione di tagging (automatico) per simulare ciò è complicato, poiché non accetta testo con spazi all'interno.
Stas Slabko

2
Che bella scoperta! Ho finito per usare Selectize poiché sembra più Bootstrap-esque.
Steven

1
A causa del problema segnalato da @compcentral e Stas, ho scelto di utilizzare selectize.js.
Neil Monroe

1
@compcentral perché non usi il metodo dell'origine dati remota?
Clain Dsilva

23

Il datalist HTML5 di base funziona? È pulito e non devi giocare con il codice disordinato di terze parti. Tutorial di W3SCHOOL

La documentazione MDN è molto eloquente e contiene esempi.


3
Il problema principale con HTML 5 datalistè che non supporta alcun evento DOM. Quindi ogni volta che selezioni un valore, devi uscire dalla casella di testo corrispondente
Pawan

@Pawan Questo non è vero (più?). L'input collegato al datalist accende il cambiamento e inserisce almeno gli eventi. Guarda qui , sia gli eventi di modifica che quelli di input attivano un registro della console.
Félix Gagnon-Grenier

1
Tutti questi anni. Tutti questi anni a scherzare con librerie di terze parti invece di una soluzione semplice e pulita già supportata ...
Félix Gagnon-Grenier




Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.