Menú desplegable de autocompletar con botones de enlace, o "AJAX enloquecido"

Question

Bien, quiero un menú desplegable de autocompletar con botones de enlace como selecciones.Entonces, el usuario coloca el cursor en el "cuadro de texto" y recibe una lista de opciones.Pueden comenzar a escribir para reducir la lista o seleccionar una de las opciones de la lista.Tan pronto como hagan clic (o presionen Intro), el conjunto de datos al que está vinculado será filtrado por la selección.

Bien, ¿es esto tan fácil como incluir un autocompletado AJAX en un menú desplegable?¿No?(¿Por favor?)

Answer 1

Este widget se puede hacer con tres elementos:una entrada de texto, entrada de botones y una lista desordenada para contener los resultados.

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul mostrado en:

• Evento 'keyUp' de la entrada de texto (si el valor no está vacío)
• Evento 'clic' de la entrada del botón (si actualmente no está visible)

ul oculto en:

• Evento 'clic' de la entrada del botón (si actualmente está visible)
• evento 'clic' de elementos de la lista

Cuando se muestra ul o se activa el evento 'keyUp' de la entrada de texto, se debe realizar una llamada AJAX al servidor para actualizar la lista.

En caso de éxito, los resultados deben colocarse en ul.Al crear los elementos de la lista, deben tener un evento de 'clic' adjunto que establezca el valor de entrada de texto y oculte el ul (es posible que deba agregar un enlace dentro del li para adjuntar el evento).

La parte más difícil es realmente el CSS.JavaScript es simple, especialmente con un prototipo similar a una biblioteca sólida que admite múltiples navegadores.

Probablemente querrá admitir algunas ID para los elementos, por lo que puede agregar algunas entradas ocultas a cada elemento de la lista con la ID y junto a la entrada de texto para almacenar la ID de los elementos seleccionados.

Answer 2

Tendrá que manejar el evento OnSelectedIndexChanged de su lista desplegable para volver a vincular su conjunto de datos según la selección de usuarios.Si desea que el filtrado se realice en una devolución de datos asíncrona, ajuste el conjunto de datos (o la cuadrícula de datos, supongo) y su menú desplegable en un UpdatePanel.Esa es una forma de hacerlo de todos modos.

Answer 3

No estoy del todo seguro de lo que quieres, pero el Ra-Ajax Autocompletador Definitivamente tiene soporte para tener "controles" dentro de sí mismo.Puedes verlo en el cuadro de búsqueda en apilados de hecho (esquina superior derecha) donde usamos enlaces.Pero esto también podría ser LinkButtons si lo deseas...

Descargo de responsabilidad;Trabajo con Ra-Ajax...

Answer 4

En mi opinión, no deberías usar AJAX para esto en absoluto.

este es el por qué:

(1) Enfocado:TODAS las opciones que puede seleccionar se muestran en el menú desplegable.Esto significa que todas las opciones posibles ya están enviadas al cliente.

(2) Si el usuario escribe algo, la cantidad de entradas en el menú desplegable se filtra para que coincida.Esto se puede hacer fácilmente en el lado del cliente.Ser ajax'y y volver al servidor en este punto solo ralentizará las cosas.

phpguru.org tiene un control que es "casi exactamente" lo que necesitas:

http://www.phpguru.org/static/AutoComplete.html#demo

Se diferencia ligeramente de lo que necesita en que muestra el menú desplegable al hacer doble clic en lugar de estar enfocado.Eso debería ser bastante fácil de modificar.

Espero que esto ayude.