Tích hợp hình ảnh với jQuery AutoComplete

Question

vì vậy tôi đang làm việc với dự án này, nơi tôi đang sử dụng jQuery autocomplete để hiển thị kết quả tìm kiếm từ cơ sở dữ liệu mysql. Kết quả tìm kiếm là tên sản phẩm được tìm nạp từ cơ sở dữ liệu có hình ảnh sản phẩm. Làm cách nào để tôi có thể hiển thị hình ảnh sản phẩm như trong hình dưới đây?

Dưới đây là jQuery tự động trang hoàn chỉnh của tôi:

<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ó một phương pháp gọi là _renderItem mà bạn muốn sử dụng.

Đây là bản trình diễn nhỏ của nó đang được sử dụng: http://jsbin.com/cunuxaqe/2/edit