¿Cómo obtengo un autocompletado de jquery de dos columnas?

Tengo dos listas de cosas que quiero buscar para un cuadro de autocompletar en mi sitio. Una es una lista de tiendas, y la otra es una lista de búsquedas que otras personas han hecho para los productos. Me gustaría autocompletar para mostrar dos columnas, una columna para el primer conjunto de búsqueda y la otra columna para el otro conjunto de búsqueda.¿Cómo obtengo un autocompletado de jquery de dos columnas?

Por ejemplo, alguien que busque zapatos debería ver "shoebuy, zapatos sin pagar, shoemall, etc ..." en la lista de la izquierda, luego "zapatos, zapatos, zapateros, betún, etc." en la segunda columna .

¿Cómo puedo hacer esto?

Fuente

2011-09-23 Zak

Hasta ahora he intentado mirar docs autocompletar jQuery y no encontrado que es posible allí ... Me gustaría ver si alguien más lo ha hecho con extensiones de bibliotecas simples o si existe otra biblioteca para realizar un autocompletado más exhaustivo. – Zak

Dudo que lo obtenga de fábrica, aunque podría estar equivocado. Es posible que deba tomar la biblioteca de autocompletar existente y ampliarla para adaptarla a su propósito. El enfoque podría ser, el autocompletar envía la consulta a un componente del lado del servidor. El componente del lado del servidor buscaría en ambos orígenes de datos - tiendas y otras búsquedas - y devolverá un objeto json que consta de ambos resultados, es decir, un objeto de tienda que contiene una lista de nombres de tienda y un objeto de búsqueda antigua con una lista de cadenas de búsqueda antiguas. La biblioteca de autocompletar analizará la respuesta y la dibujará en la interfaz de usuario de la forma que desee. – legendofawesomeness

La parte del servidor no es un problema. Ya está escrita y los datos se pueden transformar en el formato apropiado ... Solo quería ver cómo anular fácilmente el objeto de menú dentro de la función de autocompletar o usar un complemento completo en la biblioteca para mostrar datos de 2 columnas. – Zak

Dudo que algo como esto ya exista. Lo que puede hacer es crear un diseño CSS de dos columnas dentro de un div que se muestra debajo del campo de texto siempre que se modifique. De esa manera, puede instalar en cada columna individualmente, incluso con la misma petición AJAX:

<input id="autocompleteField" type="text" /> 
<div class="autocomplete"> 
<div class="autoLeft"></div> 
<div class="autoRight"></div> 
</div> 

$("#autocompleteField").change(function() { 
    $.get("url", $(this).val(), function(response) { 
    $(".autoLeft").html(response.left); 
    $(".autoRight").html(response.right); 
    }, "json"); 
});

Fuente

2011-09-24 01:53:47 Art

Se podía desencadenar una búsqueda en una segunda entrada (oculto) ... aquí es lo que he puesto juntos (demo):

HTML

var stores = [ 
    'shoes', 
    'shoes!', 
    'shoebuy', 
    'payless shoes', 
    'shoemall', 
    'shoes galore' 
    ], 
    searches = [ 
    'shoe', 
    'shoes', 
    'shoe rack', 
    'shoe polish', 
    'shoe horn' 
    ], 
    storeBox = $('#stores'), 
    searchBox = $('#searches'), 
    closeDropdowns = function() { 
    searchBox.autocomplete('close'); 
    storeBox.autocomplete('close'); 
    }; 

storeBox.autocomplete({ 
    source: stores, 
    search: function(event, ui) { 
    // initiate search in second autocomplete with the same value 
    searchBox.autocomplete('search', this.value); 
    }, 
    select: function() { 
    closeDropdowns(); 
    }, 
    close: function() { 
    closeDropdowns(); 
    } 
}); 

searchBox.autocomplete({ 
    source: searches, 
    select: function(event, ui) { 
    storeBox.val(ui.item.value); 
    searchBox.autocomplete('close'); 
    storeBox.autocomplete('close'); 
    }, 
    close: function() { 
    closeDropdowns(); 
    } 
});

Fuente

2011-09-24 02:37:58 Mottie

Sé que esto fue publicado hace un tiempo, pero estoy usando este script y tengo problemas para cerrar la segunda casilla. ¿Algún consejo? – Cozmoz

Pruebe el código actualizado ... y la demostración. – Mottie

Lo siento, no me di cuenta, cuando elimino el contenido del campo de entrada, el segundo menú no se cierra. – Cozmoz

tengo una idea ligeramente diferente, que no puede ser molestado en escribir el código en este momento (desde su 2 am), pero mal darle el concepto:

(supongo que usa JqueryUI.autocompleto)

, por lo que debe interceptar el evento de creación (consulte la documentación de la sección de categorías en Autocompletar de JqueryUI para resolver esto).

Por lo tanto, en el evento create, quiere agregar dos div dentro del div que es la barra autocompletar/ventana/lo que sea y flotarlos con ancho: 50% ;. luego cuando recuperas los valores (a través de ajax) marca una "categoría" (es decir, listLeft o listRight) y luego usa .append para agregarlos a cada lista, y asegúrate de darles la clase de autocompleteButton o como se llame.

representación gráfica:

enter image description here

Fuente

2011-09-24 16:15:05 MrJD

¿Cómo obtengo un autocompletado de jquery de dos columnas?

Respuesta

Cuestiones relacionadas