Come restituire jquery autocomplete risultato separato div?

Ho trovato qui che per sovrascrivere uno degli eventi di completamento automatico. Ma qualcuno può per favore darmi l’esempio di come fare lo stesso?

InformationsquelleAutor LA_ | 2011-10-29

 

4 Replies
  1. 17

    Il appendTo opzione funziona bene come previsto, e se si controlla il DOM, il <ul> risultati di questi elementi sarà collegato all’elemento. Tuttavia, a causa di un posizionamento assoluto generato da jQueryUI, l’elenco ancora appare direttamente sotto il <input>.

    Che ha detto, è possibile ignorare l’interno _renderItem direttamente append risultati completamente diversi, elemento, ad esempio:

    HTML

    <input id="autocomplete"/>
    <div class="test">Output goes here:<br/><ul></ul></div>

    JavaScript

    $('input').autocomplete({
        search: function(event, ui) {
            $('.test ul').empty();
        },
        source: ["something", "something-else"]
    }).data('autocomplete')._renderItem = function(ul, item) {
    
        return $('<li/>')
       .data('item.autocomplete', item)
       .append(item.value)
       .appendTo($('.test ul'));
    };

    Ho anche creato un demo per dimostrare questo. Siete pregati di notare che l’ultima libreria jQuery non ha avuto jQueryUI testato contro di esso completamente, così sto usando la versione precedente che mi permette di selezionare per includere jQueryUI direttamente con il jsFiddle opzioni.

    • Grazie, sembra che questo è quello che sto cercando – si farà più 😉
    • Sembra che la selezione del gestore che di solito fuoco quando si seleziona l’opzione di completamento automatico non funziona con questo tipo di configurazione. C’è un modo per farlo funzionare?
    • Corretto. Dal momento che le opzioni sono stato spinto a un elemento diverso, nessuno di jQueryUI eventi saranno licenziati. Si avrebbe bisogno di duplicare gli eventi personalizzati di uscita elemento di imitare il jQueryUI di completamento automatico di eventi e che sembra proprio sbagliato. Si potrebbe forzare il jQueryUI elemento in una nuova posizione che vorresti trattenere gli eventi che potrebbero funzionare per voi.
    • Fantastico!!! Sarà davvero utile per me, come io sto cercando di utilizzare Geonames servizio web con jQuery Mobile. Grazie!!!!!!
  2. 6
    <div class="test">Output goes here:<br/></div>
    
    <script>
      $("input#autocomplete").autocomplete({
        source: ["something", "something-else"],
        appendTo: ".text",
        position: { my: "left top", at: "left bottom", of: ".test" }
    //other options here
      });
    </script>
    • Hmm, non funziona per me in qualche modo – $( "#search" ).autocomplete({ appendTo: ".test", source: "/search", minLength: 2}); Ciò che può essere di sbagliato qui?
    • hai un div con un class="test"?
    • Sicuramente. Ho provato questo qui – jsfiddle.net/Gn2dX, non funziona anche ((.
    • autocomplete è parte di jquery-ui. Provare a caricare il file dopo jquery. Il tuo esempio: jsfiddle.net/Gn2dX/2 jquery-ui: jqueryui.com/download
    • jquery-ui sicuramente funziona. E viene caricato dopo jquery ui nel mio codice, quindi non aiuta…
    • ma non era in jsfiddle che mi hai inviato. hai provato il mio esempio? jsfiddle.net/Gn2dX/2
    • Sì, sto testando il tuo esempio e non funziona per me (provato sia con FF e Chrome).
    • Ok. Che strano. Non appena scrivo la lettera ‘s’ nel campo, che mi dà 2 parole.
    • Ma il risultato, collegata al ‘test’ campo di classe? A vedere cosa succede sul mio PC – habrastorage.org/storage1/ccc5cb70/c4860d67/3b37b2bb/… (ho aggiunto un paio di br).
    • Sì, ora funziona, ma non è questo che sto cercando – una volta che i tipi di utente qualcosa nel campo di ricerca, che si desidera visualizzare i risultati in campo separato (come Google, live search, ora funziona, ma non ho bisogno di questo elenco a discesa con le opzioni – ho bisogno dei risultati di ricerca).
    • Mi piace questa risposta, in collaborazione con il _renderItem soluzione. Funziona alla grande per me. Thanx

  3. 2

    Ho bisogno di più controllo su dove mettere i dati, quindi questo è come ho fatto:

    $("#input").autocomplete({
        minLength: 3,
        source: [
            "ActionScript",
            "AppleScript",
            "Asp"
        ],
        response: function(event, ui) {
            console.log(ui.content);
            //put the content somewhere
        },
        open: function(event, ui) {
            //close the widget
            $(this).autocomplete('close');
        }
    });
  4. 2

    hle risposta lavorato impressionante per me e ti dà più flessibilità! Ecco il mio codice di test che è stato modificato dalla sua risposta:

    $("#autocomplete").autocomplete({
        minLength: 3,
        source: ["something", "something-else"],
        response: function(event, ui) 
        {
            console.log(ui.content);
            //put the content somewhere
        },
        open: function(event, ui) 
        {
            //close the widget
            $(this).autocomplete('close');
        }
    });

Lascia un commento