Aggiungere un collegamento a un elemento di completamento automatico jQueryUI

Question

Quando un utente inizia a digitare sulla casella di ricerca, la pagina suggerimento restituisce l'ultimo elemento da tutte le collezioni di corrispondenza che nama, più altri dati.

Mi piacerebbe dimostrare che punto (lungo la sua immagine), e un link a "Vedere i lotti di questa collezione".

posso fare (la maggior parte), che con il seguente codice:

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: suggesturl,
            dataType: 'json',
            data: request,
            success: function (data) {
                response(data.map(function (value) {
                    return {
                        'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>',
                        'value': value.fullname
                    };  
                }));
            }   
        }); 
    },  
    minLength: 3
})

Il problema è che, anche se il collegamento viene visualizzato nella casella, quando viene cliccato viene ignorato e viene eseguita l'azione predefinita select (value dell'elemento viene messo nella casella di testo).

Answer 1

Sembra di avere un paio di opzioni. In primo luogo, è possibile specificare la propria azione di selezione, utilizzando un selezionare l'opzione sul inizializzatore completamento automatico.

$(selector).autocomplete({
    source: ... ,
    select: function(value, data){
          if (typeof data == "undefined") {
              emitMessage('You selected: ' + value + "<br/>");
          } else {
              emitMessage('You selected: ' + data.item.value + "<br/>");
          }
    }
});

Se questo non è sufficiente, per qualche ragione, allora è possibile rendere il proprio contenuto per l'elenco di completamento automatico, e in questo modo ottenere il massimo controllo di cui hai bisogno.
Fate quello scimmia-patching del fn _renderItem, che è ciò di completamento automatico chiama a rendere ogni elemento della lista. Controllare questa risposta per come farlo. Funziona in v1.8rc3.

Suppongo che in _renderItem si potrebbe rendere un <span> cliccabile, e allegare qualsiasi logica vi piace l'evento click.

Se si va questa strada, si può avere la necessità di spegnere l'azione predefinita click. Penso completamento automatico utilizza un <a> per l'elemento che fornisce l'evento click. In tal caso, è necessario disinserire tale gestore clic.