Intégration de l'image avec jQuery AutoComplete
donc je suis en train de travailler sur ce projet pour lequel je suis à l'aide de jQuery autocomplete pour afficher les résultats de recherche à partir d'une base de données mysql. Les résultats de la recherche sont des noms de produits récupérés à partir d'une base de données qui a produit des images.
Comment serais-je capable d'afficher des images de produits comme dans l'image ci-dessous ?
Voici mon jQuery automatique page :
<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');
}
?>
source d'informationauteur NetStack
Vous devez vous connecter pour publier un commentaire.
Il y a une méthode appelée
_renderItem
que vous voulez les utiliser.Voici une petite démo de ce à utiliser: http://jsbin.com/cunuxaqe/2/edit