Интеграция изображения с автозаполнением jQuery

поэтому я работаю над этим проектом, где я использую автозаполнение jQuery для отображения результатов поиска из базы данных mysql. Результаты поиска – это названия продуктов, полученные из базы данных, в которой также есть изображения продуктов. Как я смогу отображать изображения продукта, как на изображении ниже?

введите описание изображения здесь

Вот моя первая страница автозагрузки jQuery:

<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'); } ?>