javascript 将图像与 jQuery AutoComplete 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23034772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integrating image with jQuery AutoComplete
提问by NetStack
so I'm working on this project where I'm using jQuery autocomplete to display search results from a mysql database. The search results are product names fetched from a database which has product images as well. How would I be able to display the product images like in the image below ?
所以我在这个项目上工作，我使用 jQuery 自动完成来显示来自 mysql 数据库的搜索结果。搜索结果是从包含产品图像的数据库中获取的产品名称。我怎样才能像下面的图片一样显示产品图片？
Here's my jQuery auto complete page :
这是我的 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
<?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');
}
?>
回答by Bill Criswell
There's a method called _renderItemthat you'd want to use.
有一种_renderItem您想使用的方法。
Here's a small demo of it in use: http://jsbin.com/cunuxaqe/2/edit
这是使用中的一个小演示：http: //jsbin.com/cunuxaqe/2/edit
