我有一个带有JQuery ui自动完成功能的脚本，效果很好。有一个搜索过程显示用户的第一个名字和姓氏。但在我的数据库中，还有用户＆＃39; pic我想用fristname和lastname在建议中显示它。
（在数据库中，pic包含图片网址）
剧本：
$(function() {
$("#search").autocomplete({
source: "autocomplete.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if(url != '') {
location.href = '...' + url;
}
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
});
autocomplete.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();
?>
请帮忙。
答案 0 :(得分：5)
您必须准备好<img>元素才能收到img网址...
然后在选择中，将URL传递给src属性。
在下面的演示中，我模拟了你的json响应.... 尝试使用“ John Doe ”或“系统管理员”。
$(function() {
$("#search").autocomplete({
source: //"autocomplete.php",
[
{
id:"John Doe",
value:"John Doe",
label:"John Doe",
img:"http://images.maskworld.com/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.ericom.com/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-autocomplete").css("z-index", 1000);
}
});
});img{
max-height:350px;
max-width:200px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="search"><br>
<img id="pic">
<小时/> 的修改
也许您希望在下拉列表中显示图像...
我在jQuery-UI documentation找到了这个。
$(function() {
$("#search").autocomplete({
source: //"autocomplete.php",
[
{id:"John Doe",
value:"John Doe",
label:"John Doe",
img:"http://images.maskworld.com/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.ericom.com/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-autocomplete").css("z-index", 1000);
}
})
.autocomplete( "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.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="search"><br>
答案 1 :(得分：1)
您可以使用_renderItem( ul, item )：
$("#search").autocomplete({
source: [
{
value: "aaa",
label: "aaa",
desc: "aaa",
icon: "https://dummyimage.com/50x50/000/fff&text=aaa"
},
{
value: "bbb",
label: "bbb",
desc: "bbb",
icon: "https://dummyimage.com/50x50/000/fff&text=bbb"
},
{
value: "ccc",
label: "ccc",
desc: "ccc",
icon: "https://dummyimage.com/50x50/000/fff&text=ccc"
}
],
minLength: 0,
select: function (event, ui) {
$("#search").val(ui.item.label);
return false;
}
});
$("#search").data("ui-autocomplete")._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.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" id="search">