объединить небольшое изображение с названием фильма для текстового поля автозаполнения

У меня есть форма PHP содержит несколько вопросов. Один из вопросов в этой форме: «Какие ваши любимые фильмы?» для которого я использовал автозаполнение jQuery, и это работает хорошо.

То, что я хотел бы сделать сейчас, это объединить названия фильмов с небольшим изображением рядом с ним. Я сохранил некоторые названия фильмов IMDb, а также ссылку на изображения их плакатов, которые я получил при сканировании.

Мой вопрос: Как я могу интегрировать изображения фильмов в их заголовки в списке автоматического предложения?
Я прочитал несколько похожих вопросов, таких как Вот этот, но моя проблема в том, что мой src для изображения не является конкретным URL-адресом, но есть ссылка на каждый фильм в базе данных, например, это несколько posterLinks для некоторых фильмов:

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>

и это фильмыauto.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);
}

?>

Любое предложение будет высоко оценено,

0

Решение

У вас уже есть все, что вам нужно. А как насчет создания массива php, который имеет ту же структуру, что и в демо, которое вы нашли? Тогда у вас есть ваш URL и имя.

Просто добавьте столбец к вашему запросу и вставьте объект в ваш $ return_arr:

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]