在JQuery ui自动完成中显示图像 [英] Show image in JQuery ui autocomplete

问题描述

我有一个具有JQuery ui自动完成功能的脚本，该脚本可以完美运行.有一个搜索过程显示用户firsname和lastname.但是在我的数据库中，还有用户的图片，我想在建议中显示该图片的名字和姓氏.

I have a script with JQuery ui autocomplete 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)

脚本:

$(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();
 ?>

请帮助.

推荐答案

您只需准备一个<img>元素即可接收img URL ...
然后在选择时，将URL传递给src属性.

You just have to have an <img> element ready to receive the img URL...
Then on select, pass the URL to the src attribute.

在下面的演示中，我模拟了您的json响应....
尝试使用" John Doe "或"系统管理员".

In the demo below, I simulated your json response....
Try with "John Doe" or "System Admin".

$(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文档中找到的.

Maybe you wish to have the image in the dropdown...
I found this in 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>

这篇关于在JQuery ui自动完成中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！