Integrazione dell'immagine con jQuery AutoComplete

Question

quindi sto lavorando a questo progetto in cui sto usando il completamento automatico di jQuery per visualizzare i risultati di ricerca da un database mysql. I risultati della ricerca sono nomi di prodotti recuperati da un database che ha anche immagini di prodotto. Come potrei essere in grado di visualizzare le immagini del prodotto come nell'immagine qui sotto?

Ecco la mia jQuery automatico pagina completa:

<script> 
$("#birds").autocomplete({ 
     source: "search.php", 
     minLength: 2, 
     select: function(event, ui) { 


     log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.label : 
      "Nothing selected, input was " + this.actor); 
     window.location.href = './products/' + ui.item.productid; 
     //window.location.href = 'product_display.php?id=' + ui.item.value; 
     // document.testForm.action = "pretravel.php?id="+ui.item.value; 
     //document.testForm.submit(); 
     } 
    }); 
    }); 
</script> 

search.php

<?php 
include 'dbconnector.php'; 

// Sanitise GET var 
if(isset($_GET['term'])) 
{ 
$term = mysql_real_escape_string($_GET['term']); 
// Add WHERE clause 
//$term="Apple"; 
$query = "SELECT `productid`, `productname` FROM `products` WHERE `productname` LIKE '%".$term."%' ORDER BY `productid`"; 


$result = mysql_query($query,$db) or die (mysql_error($db)); 
$id=0; 
$return=array(); 
while($row = mysql_fetch_array($result)){ 

    //array_push($return,array('label'=>$row['productid'],'actor'=>$row['productname'])); 
    //array_push($return,array('value'=>$row['productid'],'label'=>$row['productname'])); 
    //array_push($return,array('actor'=>$row['productname'],'label'=>$row['productid'])); 
    array_push($return,array('productid'=>$row['productid'],'label'=>$row['productname'])); 

} 

header('Content-type: application/json'); 
echo json_encode($return); 
//var_dump($return); 

exit(); // AJAX call, we don't want anything carrying on here 
} 
else 
{ 
    header('Location:index'); 
} 

?> 

Answer 1

C'è un metodo chiamato _renderItem che ci si vuole utilizzare.

Ecco una piccola demo di esso in uso: http://jsbin.com/cunuxaqe/2/edit