在JQuery UI自动完成中显示图像

Question

我有一个脚本，JQuery UI自动完成功能完美。有一个搜索过程显示用户名和姓氏。但在我的数据库中，也有用户的照片，我想用fristname和lastname的建议显示它。

（在数据库中，PIC包含图像URL）

脚本：

$(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); \t \t \t 
 
     } 
 
    });  \t 
 
});

autocomplete.php

<?php  
 
if (!isset($_REQUEST['term'])) { 
 
\t 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")) { 
 
\t while($row = mysqli_fetch_array($data)) { 
 
\t \t $firstname = htmlentities(stripslashes($row['firstname'])); 
 
\t \t $lastname = htmlentities(stripslashes($row['lastname'])); 
 
\t \t $id= htmlentities(stripslashes($row['id'])); 
 
\t \t $pic= htmlentities(stripslashes($row['pic'])); 
 
\t \t $a_json_row["id"] = $id; 
 
\t \t $a_json_row["value"] = $firstname.' '.$lastname; 
 
\t \t $a_json_row["label"] = $firstname.' '.$lastname; 
 
\t \t array_push($a_json, $a_json_row); 
 
\t } 
 
} 
 
    
 
/* jQuery wants JSON data */ 
 
echo json_encode($a_json); 
 
flush(); 
 
?>

请帮忙。

Answer 1

你只需要有一个<img>元准备接收IMG网址...
然后在选择时，URL传递给src属性。

在下面的演示中，我模拟您的JSON响应....
尝试用“李四”或“系统管理”。

$(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>

Answer 2

您可以使用_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">