将小图像与电影名称集成以实现自动完成文本框

Question

我有一个包含一些问题的 PHP 表单。这种形式的问题之一是：“你最喜欢的电影是什么？”为此，我使用了 jQuery 自动完成功能并且效果很好。

我现在想做的是将电影标题与旁边的小图像整合在一起。我存储了一些 IMDb 电影标题，以及我通过抓取获得的海报图片的链接。

我的问题：如何将电影图像整合到自动建议列表中的标题中？ 我读了一些类似的问题，如This one，但我的问题是我的图像的 src 不是特定的 url，但是数据库中的每部电影都有一个链接，例如这些是一些电影的一些海报链接：

http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_AL_.jpg

http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SY317_CR0,0,214,317

http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX214_AL_.jpg

这是我的代码：

<fieldset id = "q27"> <legend class="Q27"></legend>
<label class="question"> What are your favorite movies?<span>*</span></label>
<div class="fieldset content"> 
<p>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>

<div class="movienames">
<a href="#" id="addScnt4">Add more movies</a>
<div id="m_scents">
<p>
<label style="margin-bottom:10px;" for="m_scnts">
<input class="autofill4" type="text" id="m_scnt" size="20" name="q27[]"
value="" placeholder="Enter text" />
</label>
</p>
</div>
</div>
</p>
</div>
</fieldset>

<script type="text/javascript">
 $(function() {
  var $title = $('#m_scnt');

  //autocomplete
 $title.autocomplete({
   source: "testfilmsauto.php",
   minLength: 3
   focus: function( event, ui ) {
    $title.val( ui.item.label );
   return false;
   },
   select: function( event, ui ) {
    $title.val( ui.item.label );
    return false;
   }
 });

$title.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  var $li = $('<li>'),
  $img = $('<img>');

  $img.attr({
   src: item.icon,
   alt: item.label
  });

 $li.attr('data-value', item.label);
 $li.append('<a href="#">');
 $li.find('a').append($img).append(item.label);    

  return $li.appendTo(ul);
 };
});

</script>

这是filmsauto.php，我从数据库获取电影：

<?php
if (isset($_GET['term'])){
$return_arr = array();

try {
    $conn=new PDO('mysql:dbname=imdb;host=localhost', 'user', 'pass');
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare('SELECT DISTINCT movieName FROM film_Posters WHERE movieName LIKE :term limit 0, 10');
    $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

    while($row = $stmt->fetch()) {
      //    $return_arr[] =  $row['movieName'];
              $obj = new stdClass;
                $obj->value = $row['movieName']; 
                $obj->label = $row['movieName'];
                $obj->icon = $row['posterLink'];
               $return_arr[] = $obj;                    
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

 echo json_encode($return_arr);
}

?>

任何建议都将受到高度赞赏，

Answer 1

您已经拥有所需的一切。创建一个与您在演示中找到的具有相同结构的 php 数组怎么样？然后你有你的网址和你的名字。

只需将该列添加到您的查询中，然后将一个对象推送到您的 $return_arr 中：

$obj = new stdClass;
$obj->value = $row['movieName']; 
$obj->label = $row['movieName'];
$obj->icon = $row['moviePic'];
$return_arr[] = $obj;