Come ottengo un completamento automatico jQuery a due colonne?

Ho due elenchi di cose che voglio cercare attraverso una casella di completamento automatico sul mio sito. Uno è un elenco di negozi e l'altro è un elenco di ricerche che altre persone hanno fatto per i prodotti. Vorrei completare la visualizzazione automatica di due colonne, una colonna per il primo set di ricerca e l'altra colonna per l'altro set di ricerca.Come ottengo un completamento automatico jQuery a due colonne?

Ad esempio, qualcuno che cerca scarpe dovrebbe vedere "shoebuy, scarpe senza pagamento, scarpe da ginnastica, ecc ..." nell'elenco di sinistra, quindi "scarpe, scarpe, scarpiera, lucido da scarpe, ecc." Nella seconda colonna .

Come posso fare questo?

fonte

2011-09-23 Zak

Finora ho provato guardando jQuery documentazione di completamento automatico e non ritenuto possibile là ... Mi piacerebbe vedere se qualcun altro ha fatto con semplici estensioni di libreria , o se esiste un'altra libreria per fare un auto-completamento più approfondito. – Zak

Dubito che avrai questo standard, anche se potrei sbagliarmi. Potrebbe essere necessario prendere la libreria di completamento automatico esistente ed estenderla in base al proprio scopo. Potrebbe essere l'approccio, il completamento automatico invia la query a un componente lato server. Il componente lato server eseguirà la ricerca su entrambe le origini dati (negozi e altre ricerche) e restituirà un oggetto JSON costituito da entrambi i risultati, ovvero un oggetto archivio contenente un elenco di nomi di negozi e un oggetto oldSearches con un elenco di stringhe di ricerca precedenti. La libreria autocomplete analizzerà la risposta e la dipingerà sull'interfaccia utente nel modo desiderato. – legendofawesomeness

La parte lato server non è un problema .. Già scritto di fatto e i dati possono essere trasformati in qualsiasi formato appropriato ... Volevo solo vedere come sovrascrivere facilmente l'oggetto menu all'interno del completamento automatico o utilizzare un intero add on library per visualizzare dati a 2 colonne. – Zak

Dubito che qualcosa del genere esista già. Quello che puoi fare è creare un layout CSS a due colonne all'interno di un div che viene visualizzato sotto il campo di testo ogni volta che viene modificato. In questo modo, è possibile compilare ogni colonna singolarmente, anche utilizzando la stessa richiesta 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"); 
});

fonte

2011-09-24 01:53:47 Art

Si può solo innescare una ricerca in un secondo ingresso (nascosto) ... qui è quello che ho messo insieme (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(); 
    } 
});

fonte

2011-09-24 02:37:58 Mottie

So che questo è stato postato qualche tempo fa, ma sto usando questo script e sto avendo problemi a chiudere la seconda casella. Qualche consiglio? – Cozmoz

Prova il codice aggiornato ... e demo. – Mottie

Spiacente, non mi sono chiarito, quando elimino il contenuto del campo di input il secondo menu non si chiude. – Cozmoz

ho un'idea leggermente diversa, non posso essere preso la briga di scrivere il codice in questo momento (dopo la sua 2:00), ma mal si darà il concetto:

(suppongo che tu stia usando JqueryUI.autocomplete)

quindi devi intercettare l'evento create (guarda la documentazione della sezione categorie in autocomplete di JqueryUI per capirlo).

Quindi nell'evento di creazione si desidera aggiungere due div all'interno del div che è la barra/finestra di completamento automatico/quant'altro e spostarli con larghezza: 50% ;. quindi, quando recuperi i valori (tramite ajax), controlla una "categoria" (ad esempio listLeft o listRight) e poi usa .append per aggiungere a ciascuna lista di conseguenza, e assicurati di dare loro la classe di autocompleteButton o qualunque sia la sua chiamata.

rappresentazione grafica:

enter image description here

fonte

2011-09-24 16:15:05 MrJD

Come ottengo un completamento automatico jQuery a due colonne?

risposta

Problemi correlati