GUI alternativa a <select> cuando tiene muchas opciones

Question

A <select> puede ser bueno para elegir entre 3-15 artículos simples, pero ¿cómo se maneja con 15-100 +?

La opción más simple habría de tener sólo una llanura <select> con una gran cantidad de <option> s, pero no es muy fácil de usar. Hay un montón de desplazamiento y puede ser difícil encontrar la opción que está buscando. El beneficio es que puedes (tal vez con desplazamiento) ver todas las opciones que tienes.

Una opción más avanzada sería tener un campo de texto con autocompletar. Un usuario teclea una o dos letras y los resultados de búsqueda vuelven a elegir. Hace que sea más fácil encontrar la opción que está buscando - si sabe lo que está buscando. El inconveniente es que el usuario no puede ver todas las opciones.

Una opción aún más avanzada consistiría en crear un widget de "buscar, enumerar y elegir" que muestra de forma predeterminada X elementos, pero le permite realizar búsquedas. Una ventaja de este enfoque es que puedo permitir la búsqueda en múltiples atributos y no solo el nombre del elemento que se va a seleccionar.

1. ¿Qué soluciones se han desplegado en estas situaciones?
2. ¿Hay algún complemento de jQuery que deba conocer?

Answer 1

1. La solución que me gusta usar es proporcionar al usuario una lista de selección con todas las opciones (en caso de que desee ver a través de él), pero proporcionan una función de autocompletado, que busca a través de la lista, ya que escribir en él. Tipo de híbrido de su primera y segunda opción.
2. En cuanto a los complementos, hay una serie por ahí (así como la documentación que le llevará a más) que puede ayudar aquí:
   • http://plugins.jquery.com/project/jquery-select-autocomplete
   • http://docs.jquery.com/Plugins/Autocomplete/autocomplete
   • http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/

Answer 2

Me gusta autocompletar selecciona cuando hay muchas opciones para elegir. Encontré un ejemplo de jQuery here.

Answer 3

jQuery UI tiene un control AutoComplete. Puede vincular esto junto con una función de devolución de llamada como fuente de datos y usar Ajax para obtener grandes conjuntos de datos.

Answer 4

hay un Autocomplete plugin para jQuery y hay Autocomplete en jQuery UI.

Answer 5

Puede probar Unobtrusive Fast-filter Dropdown (UFD) jquery plugin. Este es de lejos mi favorito y funciona muy bien en diferentes navegadores incluso ie6. Se puede diseñar fácilmente y es definitivamente rápido.Puede gestionar miles de elementos y es más rápido que el autocompletado de combobox de jQuery UI

Answer 6

Una posible solución que he visto algunas implementaciones de texto buenas es fish eye selector utilizada en listas verticales. Hay muchos ejemplos de javascript/CSS, Flash y Java en línea.

Answer 7

Si las opciones forman grupos de forma natural, podría considerar usar HTML optgroups en lugar de una solución basada en javascript. Hace que un conjunto grande de opciones sea mucho más organizado y manejable, a la vez que mantiene todas las opciones visibles.

No sé qué idioma/marco del lado del servidor está utilizando para generar su HTML, pero, por ejemplo, en Ruby on Rails puede usar grouped_options_for_select para generar grupos de opt automáticamente.

Answer 8

He intentado lo siguiente como se sugiere en las respuestas anteriores: plugins.jquery.com/project/jquery-select-autocomplete docs.jquery.com/Plugins/Autocomplete/autocomplete jquery-ui.googlecode.com/ svn/branches/labs/selectmenu/ Desplegable filtro rápido desplegable (UFD)

Encontré que UFD era el que más me gustaba ya que se comportaba más como un menú desplegable y tenía mucha versatilidad incorporada, también los otros estaban un poco caídos.

PERO todavía no me dio coherencia en todos los navegadores. Quiero que funcione de la misma manera en todos los navegadores. Por ejemplo: En un elemento de selección normal, si escribo la primera letra, me llevará a la primera opción que comience con esa letra y si presiono Enter, la seleccionará, PERO aquí es donde difiere del navegador a navegador. Algunos navegadores activan el evento onchange cuando se pulsa Enter y otros no hasta que el menú desplegable pierde el foco.

UFD no tenía el "onchange" consistencia que estaba buscando

Answer 9

Usted debe echar un vistazo a Choosen http://harvesthq.github.io/chosen Eso es un plugin de jQuery que generan una agradable seleccione con un campo de texto para buscar en. Esta solución permite al usuario ver todas las opciones y buscar una en particular sin tener que desplazarse.