106

Ho un requisito in cui DEVO utilizzare il dropdown automatico del bootstrap, MA l'utente può avere il testo del modulo 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 di avere il menu a tendina perché vogliamo dare alcuni valori di default come opzioni di avvio nel caso in cui gli utenti non sappiano cosa cercare.twitter bootstrap dropdown automatico completo/combobox con Knockoutjs

Sto usando questo con MVC DropDownListFor in quanto crea un controllo selezionato 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 ed il controllo è stato avermi permesso di entrare sotto forma di testo libero. Tutto bene finora.

Ora, sto usando questo in congiunzione con Knockoutjs. Collego le mie opzioni e il valore selezionato al controllo di selezione e quindi sul rendering della riga del mio modello, ho chiamato (selettore). Combobo() che rende il controllo di selezione un combobo di 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 inviare al server, dal momento che il valore inserito nella casella di input non è un'opzione valida dalle opzioni che ho dato al controllo di selezione, lo imposta sempre al primo opzione per impostazione predefinita. Questo è perché ho impostato il binding del valore selezionato sul controllo select e non sulla casella di input che è stata creata da bootstrap-combobox.js.

La mia domanda è come ottengo la casella di input per il data-bind allo stesso modo in cui è stato associato il controllo di selezione.

Altre opzioni ?? Fatemi sapere se avete bisogno di ulteriori chiarimenti o domande. Si prega di suggerire.

Grazie.

+0

I trovato una soluzione per la mia situazione. Ho usato la casella di testo TypeAhead al posto del combobox di completamento automatico e ho mostrato il menu a discesa delle opzioni per impostazione predefinita quando gli utenti si sono concentrati sul controllo o sul pulsante di destinazione. In questo modo, sanno cosa possono cercare quale era il mio requisito principale. –

risposta

244

Dai un'occhiata a Select2 for Bootstrap. Dovrebbe essere in grado di fare tutto il necessario.

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

+1

Ottimo! Grazie per le informazioni ! Questa è la componente di cui ho bisogno. – Shinichi

+27

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

+4

Come @compcentral menzionato correttamente, Select2 NON PERMETTE di inserire qualcosa che non si trova nell'elenco delle opzioni. Utilizzare la funzionalità di codifica (automatica) per simulare ciò è ingombrante, in quanto non accetta il testo con spazi all'interno. –

19

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

+3

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

+3

Inoltre non è supportato in Safari? questo significa che tutti gli i-dispositivi [pad, telefono, Mac] impazziscono anche –

Problemi correlati