I have a script with JQuery ui autoplete that works perfectly. There is a search process that shows user firsname and lastname. But in my databse, there is also users' pic and I want to display it in the suggestion with the fristname and lastname.
( in the database, pic contains the image url)
The script:
$(function() {
$("#search").autoplete({
source: "autoplete.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if(url != '') {
location.href = '...' + url;
}
},
html: true,
open: function(event, ui) {
$(".ui-autoplete").css("z-index", 1000);
}
});
});I have a script with JQuery ui autoplete that works perfectly. There is a search process that shows user firsname and lastname. But in my databse, there is also users' pic and I want to display it in the suggestion with the fristname and lastname.
( in the database, pic contains the image url)
The script:
$(function() {
$("#search").autoplete({
source: "autoplete.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if(url != '') {
location.href = '...' + url;
}
},
html: true,
open: function(event, ui) {
$(".ui-autoplete").css("z-index", 1000);
}
});
});autoplete.php
<?php
if ( !isset($_REQUEST['term']) ) {
exit;
}
$mysqli = new MySQLi($DB_host,$DB_login,$DB_pass,$DB_select);
$term = trim(strip_tags($_GET['term']));
$term = preg_replace('/\s+/', ' ', $term);
$a_json = array();
$a_json_row = array();
$a_json_invalid = array(array("id" => "#", "value" => $term, "label" => "Only letters and digits are permitted..."));
$json_invalid = json_encode($a_json_invalid);
if(preg_match("/[^\040\pL\pN_-]/u", $term)) {
print $json_invalid;
exit;
}
if ($data = $mysqli->query("SELECT * FROM users WHERE firstname LIKE '%$term%' OR lastname LIKE '%$term%' ORDER BY firstname , lastname")) {
while($row = mysqli_fetch_array($data)) {
$firstname = htmlentities(stripslashes($row['firstname']));
$lastname = htmlentities(stripslashes($row['lastname']));
$id= htmlentities(stripslashes($row['id']));
$pic= htmlentities(stripslashes($row['pic']));
$a_json_row["id"] = $id;
$a_json_row["value"] = $firstname.' '.$lastname;
$a_json_row["label"] = $firstname.' '.$lastname;
array_push($a_json, $a_json_row);
}
}
/* jQuery wants JSON data */
echo json_encode($a_json);
flush();
?>Please help.
Share Improve this question edited Aug 13, 2017 at 17:36 hasan 3,5021 gold badge18 silver badges23 bronze badges asked Aug 13, 2017 at 15:54 DilakDilak 1052 gold badges2 silver badges13 bronze badges2 Answers
Reset to default 13You just have to have an <img> element ready to receive the img URL...
Then on select, pass the URL to the src attribute.
In the demo below, I simulated your json response....
Try with "John Doe" or "System Admin".
$(function() {
$("#search").autoplete({
source: //"autoplete.php",
[
{
id:"John Doe",
value:"John Doe",
label:"John Doe",
img:"http://images.maskworld./is/image/maskworld/bigview/john-doe-foam-latex-mask--mw-117345-1.jpg"
},
{
id:"System Admin",
value:"system Admin",
label:"system Admin",
img:"http://www.eri./imgs/braftonArticles/3-things-every-system-admin-should-know-about-virtualization_16001411_800906167_0_14057272_500.jpg"
}
],
minLength: 1,
select: function(event, ui) {
/*
var url = ui.item.id;
if(url != '') {
location.href = '...' + url;
}
*/
var img = ui.item.img;
$("#pic").attr("src",img);
},
html: true,
open: function(event, ui) {
$(".ui-autoplete").css("z-index", 1000);
}
});
});img{
max-height:350px;
max-width:200px;
}<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="search"><br>
<img id="pic">EDIT
Maybe you wish to have the image in the dropdown...
I found this in jQuery-UI documentation.
$(function() {
$("#search").autoplete({
source: //"autoplete.php",
[
{id:"John Doe",
value:"John Doe",
label:"John Doe",
img:"http://images.maskworld./is/image/maskworld/bigview/john-doe-foam-latex-mask--mw-117345-1.jpg"},
{id:"system Admin",
value:"system Admin",
label:"system Admin",
img:"http://www.eri./imgs/braftonArticles/3-things-every-system-admin-should-know-about-virtualization_16001411_800906167_0_14057272_500.jpg"}
],
minLength: 1,
select: function(event, ui) {
/*
var url = ui.item.id;
if(url != '') {
location.href = '...' + url;
}
*/
},
html: true,
open: function(event, ui) {
$(".ui-autoplete").css("z-index", 1000);
}
})
.autoplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></div></li>" ).appendTo( ul );
};
});.ui-menu img{
width:40px;
height:40px;
}
.ui-menu li span{
font-size:2em;
padding:0 0 10px 10px;
margin:0 0 10px 0 !important;
white-space:nowrap;
}<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="search"><br>You can use _renderItem( ul, item ):
$("#search").autoplete({
source: [
{
value: "aaa",
label: "aaa",
desc: "aaa",
icon: "https://dummyimage./50x50/000/fff&text=aaa"
},
{
value: "bbb",
label: "bbb",
desc: "bbb",
icon: "https://dummyimage./50x50/000/fff&text=bbb"
},
{
value: "ccc",
label: "ccc",
desc: "ccc",
icon: "https://dummyimage./50x50/000/fff&text=ccc"
}
],
minLength: 0,
select: function (event, ui) {
$("#search").val(ui.item.label);
return false;
}
});
$("#search").data("ui-autoplete")._renderItem = function (ul, item) {
return $('<li/>', {'data-value': item.label}).append($('<a/>', {href: "#"})
.append($('<img/>', {src: item.icon, alt: item.label})).append(item.label))
.appendTo(ul);
};<link href="https://code.jquery./ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery./jquery-1.12.3.min.js"></script>
<script src="https://code.jquery./ui/1.12.0/jquery-ui.js"></script>
<input type="text" id="search">