작은 이미지를 자동 완성 텍스트 상자의 영화 이름과 통합합니다.

Question

저는 PHP 양식에 몇 가지 질문이 있습니다. 이 형식의 질문 중 하나는 "좋아하는 영화는 무엇입니까?"입니다. jQuery 자동 완성 기능을 사용하여 잘 작동합니다.

지금 내가하고 싶은 것은 영화 제목을 옆에있는 작은 이미지와 통합하는 것입니다. 일부 IMDb 영화 제목과 크롤링하여 얻은 포스터 이미지에 대한 링크를 저장했습니다.

내 질문 : 어떻게 자동 제안 목록의 영화 제목을 영화 제목에 통합 할 수 있습니까? 나는 This one 같은 몇 가지 유사한 질문을 읽을 수 있지만 내 문제는 이미지 내 SRC는, 특정 URL되지 않는 것입니다하지만, 데이터베이스의 각 동영상의 링크를 예를 들어이 어떤 영화에 대한 몇 가지 posterLinks 있으며,이 :

은

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

:

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

이 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

내 코드입니다 617,451,515,

이 내가 DB에서 영화를 얻을 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 배열을 만드는 것은 어떨까요? 다음 당신은 당신의 URL가 있고 당신은 이름을 대십시오.

그냥 쿼리에 열을 추가하고 $의 return_arr에 물체를 밀어 :

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