jQuery UI - Formateo de los resultados de autocompletar. Añadir imagen posible?

Question

Nos movemos del bassistance.de autocomplete al autocompletado de la jQuery UI. No puedo encontrar tantos ejemplos para la versión de jQuery UI, la documentación parece un poco escasa. Eso podría ser yo.

Me gustaría saber si alguien tiene un ejemplo/tutorial que explica cómo modificar el aspecto del panel desplegable de autocompletar. Mi código es el siguiente:

$("#SearchInput").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "http://servername/index.pl", 
      dataType: "json", 
      data: { 
       term: request.term 
      }, 
      success: function(data) { 
       response($.map(data.items, function(item) { 
        return { 
         label: item.id + " - " + item.label, 
         value: item.id 
        } 
       })); 
      } 
     }); 
    }, 
}); 

Esto funciona, me sale el ID y la etiqueta que se mostrará separados por un guión. Idealmente, me gustaría saber cómo formatear cómo se muestran los resultados. Me gustaría obtener la ID, debajo de la ID, la etiqueta. Si es posible, me gustaría saber cómo mostrar una imagen a la derecha del texto.

Si alguien tiene alguna sugerencia sobre cómo lograr esto, estaría encantado.

Answer 1

Hay alguna documentación en el sitio web de JqueryUI sobre cómo personalizar el diseño de resultados: http://jqueryui.com/demos/autocomplete/#custom-data.

Algunos ejemplo:

$("#SearchInput").autocomplete({ .... }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>") 
      .appendTo(ul); 
    };