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.


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.


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.


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




Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.