Agregar un vínculo a un elemento de autocompletar JQueryUI

Question

Cuando un usuario comienza a escribir en el cuadro de búsqueda, la página de sugerencias devuelve el último elemento de todas las colecciones que coinciden con ese nama, más otros datos.

Me gustaría mostrar ese artículo (a lo largo de su imagen) y un enlace para "ver todos los artículos de esta colección".

que puede hacer (la mayor parte) que, con el siguiente código:

$('#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 
}) 

El problema es que, aunque el enlace aparece en el cuadro, cuando se hace clic en él que es ignorada, y la acción predeterminada select es ejecutado (el artículo value se coloca en el cuadro de texto).

Answer 1

Parece que tiene un par de opciones. Primero, puede especificar su propia acción de selección, usando una opción de selección en el inicializador de autocompletar.

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

Si eso no es suficiente, por alguna razón, entonces usted puede hacer que su propio contenido de la lista de autocompletar, y de esa manera obtener el mayor control que necesita.
Lo haces arreglando el _renderItem fn, que es lo que las llamadas de autocompletar generan cada elemento en la lista. Consulte this answer para saber cómo hacerlo. Funciona en v1.8rc3.

Supongo que en _renderItem puede hacer clic en <span>, y adjuntar cualquier lógica que desee al evento click.

Si va por esa ruta, es posible que tenga que desactivar la acción de clic predeterminada. Creo que autocompletar usa un <a> para el elemento que proporciona el evento click. En ese caso, deberá desactivar ese controlador de clic.