twitter bootstrap autocompletar menú desplegable / combobox con Knockoutjs

114

Tengo un requisito en el que TENGO que usar el menú desplegable de autocompletado de bootstrap, PERO el usuario puede tener texto de forma libre en ese menú desplegable si lo desea. Antes de pensar en TypeAhead, podría usar el cuadro de texto Bootstrap TypeAhead, pero necesito tener el menú desplegable porque queremos dar algunos valores predeterminados como opciones de inicio en caso de que los usuarios no sepan qué buscar.

Estoy usando esto con MVC DropDownListFor ya que eso crea un control de selección para nosotros.

Encontré este artículo que hace eso por mí.

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

Todo lo que tenía que hacer era quitar el nombre del control de selección y el control me permitía ingresar texto de forma libre. Todo bien hasta ahora.

Ahora, estoy usando esto junto con Knockoutjs. Ato mis opciones y valor seleccionado al control de selección y luego, en la fila renderizada de mi plantilla, llamé (selector) .combobox () que hace que el control de selección sea un comobobox de arranque y agrega un control de entrada y oculta el control de selección en las escenas detrás.

El problema ahora es cuando trato de que los valores se publiquen en el servidor, ya que el valor que puse en el cuadro de entrada no es una opción válida de las opciones que di para seleccionar el control, siempre lo establece en la primera opción por defecto. Esto se debe a que configuré el enlace del valor seleccionado en el control de selección y no en el cuadro de entrada que fue creado por bootstrap-combobox.js.

Mi pregunta es cómo consigo que el cuadro de entrada se vincule a la misma propiedad a la que estaba vinculado el control de selección.

¿Alguna otra opción? Avíseme si necesita más aclaraciones o si tiene preguntas. Por favor recomiende.

Gracias.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
fuente
Encontré una solución para mi situación. Usé el cuadro de texto TypeAhead en lugar del comobox de Autocompletar y mostré el menú desplegable de opciones de forma predeterminada cuando los usuarios se enfocaron en el control o presionaron el botón hacia abajo también. De esa manera, saben lo que pueden buscar, que era mi requisito principal.
Krishna Teja Veeramachaneni

Respuestas:

254

Eche un vistazo a Select2 para Bootstrap . Debería poder hacer todo lo que necesita.

Otra buena opción es Selectize.js . Se siente un poco más nativo de Bootstrap.

Arnold Daniels
fuente
27
¿Cómo usó Select2 para permitir la entrada de texto que no estaba incluida en la fuente de datos?
compcentral
4
Como @compcentral mencionó correctamente, Select2 NO LE PERMITE ingresar nada que no esté en la lista de opciones. Usar la función de etiquetado (automático) para simular esto es engorroso, ya que no acepta texto con espacios dentro.
Stas Slabko
2
¡Qué buen descubrimiento! Terminé usando Selectize ya que parece más Bootstrap-esque.
Steven
1
Debido al problema señalado por @compcentral y Stas, elegí seleccionar selectize.js.
Neil Monroe
1
@compcentral, ¿por qué no utiliza el método de fuente de datos remota?
Clain Dsilva
23

¿Funciona la lista de datos básica de HTML5? Está limpio y no tienes que jugar con el desordenado código de terceros. Tutorial de W3SCHOOL

La documentación de MDN es muy elocuente y presenta ejemplos.

Juto
fuente
3
El principal problema con HTML 5 datalistes que no admite ningún evento DOM. Entonces, cada vez que selecciona un valor, debe salir del cuadro de texto correspondiente
Pawan
@Pawan Eso no es cierto (¿ya?). La entrada vinculada al datalist dispara eventos de cambio y entradas, al menos. Mire aquí , tanto los eventos de cambio como los de entrada activan un registro de consola.
Félix Gagnon-Grenier
1
Todos estos años. Todos estos años jugando con bibliotecas de terceros en lugar de una solución simple y limpia ya compatible ...
Félix Gagnon-Grenier
3

Select2 para el complemento nativo Bootstrap 3

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

este complemento utiliza el complemento jquery select2

nuget

PM> Install-Package Select2-Bootstrap

Mahesh
fuente
1
Hola. ¿Hay alguna diferencia con la primera respuesta votada aquí? ¿Duplica la sugerencia de seleccionar 2 por lo que puedo ver?
Félix Gagnon-Grenier
1

El combobox Fuel UX tiene todas las características que cabría esperar.

Stas Slabko
fuente
1
Hasta donde puedo ver, no tiene mecanografiado.
jpkeisala