jQuery autocompletar con imágenes

Question

Quiero implementar una característica de autocompletar con imágenes en mi sitio web.

Me gustaría utilizar el complemento de autocompletar jQuery.

He echado un vistazo a su código de muestra.

Puede alguien explicar lo que significa el código de abajo en $ (document) ready() evento:

$("#imageSearch").autocomplete("images.php", { 
    width: 320, 
    max: 4, 
    highlight: false, 
    scroll: true, 
    scrollHeight: 300, 
    formatItem: function(data, i, n, value) { 
    return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
    }, 
    formatResult: function(data, value) { 
    return value.split(".")[0]; 
    } 
}); 

Mi requisito final es al escribir algunas letras en el cuadro de texto, quiero a las opciones venir con una imagen asociada a ella.

Answer 1

usa como elemento de referencia: http://api.jqueryui.com/autocomplete/

---

$("#imageSearch").autocomplete("images.php", { 

Aplicar pluging autocompletar a todos los campos #imageSearch. Primer parámetro Supongo que es la página que genera la respuesta en función de lo que se ingresa (images.php);

 width: 320, 

Ancho de la lista desplegable

 max: 4, 

sugerencias máximo

 highlight: false, 

Resalte verdadero/falso

 scroll: true, 

Barra de desplazamiento también conocido como tipo desplegable de la lista, o solo una div larga debajo.

 scrollHeight: 300, 

Altura del menú desplegable autocompletar.

 formatItem: function(data, i, n, value) { 
      return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
     }, 

Cómo dar formato a la respuesta de regresar de images.php.

 formatResult: function(data, value) { 
      return value.split(".")[0]; 
     } 

Cómo devolver el valor, si el usuario selecciona una de las opciones.

}); 

soportes de cierre: p

Answer 2

Esto es sobre el plugin de jQuery Autocompletar, no hay ninguna opción como formatItem y formatValue en el actual interfaz de usuario jQuery Autocompletar.

Sugiero que las personas lean este http://www.learningjquery.com/2010/06/autocomplete-migration-guide que explican cómo migrar de la versión anterior del complemento al widget oficial de la interfaz de usuario.

para conseguir que Autocompletar de trabajo con la imagen en la lista de sugerir que usted debe leer este tema: http://forum.jquery.com/topic/using-html-in-autocomplete