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

时间:2014-10-20 14:54:55

标签: php jquery image movie

我有一个PHP表单包含一些问题。这种形式的问题之一是:"你最喜欢的电影是什么?"为此,我使用jQuery自动完成,它运行良好。

我现在要做的是将电影标题与旁边的小图像集成。我存储了一些IMDb电影标题,以及我通过爬行获得的海报图像的链接。

我的问题:如何在自动建议列表中将电影图像整合到其标题中? 我读了一些像This one这样的类似问题,但我的问题是我的图像的src不是特定的网址,但是数据库中的每部电影都有一个链接,例如这些是某些电影的一些海报链接:< / p>

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,我从DB获取电影:

<?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);
}

?>

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

1 个答案:

答案 0 :(得分:1)

您已拥有所需的一切。如何创建一个与您找到的演示中具有相同结构的php数组?然后你有你的网址和你的名字。

只需将列添加到查询中并将对象推送到$ return_arr:

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