title: integrate small image with movie name for autocomplete textbox
body: <p>I have a PHP form contains some questions. One of the question in this form is : "What are your favourite movies?" for which I used jQuery auto-complete and it work well. </p>
  
  <p>What I would like to do now is to integrate the movie titles with a small image beside it. I stored some IMDb movie titles and also the link to their poster images that I got by crawling.</p>
  
  <p><strong>My question:</strong> How can I integrate movie images to their titles in the auto-suggest list? 
  I read some similar questions like <a href="https://stackoverflow.com/questions/23034772/integrating-image-with-jquery-autocomplete">This one</a>, but my problem is that my src for the image is not a specific url, but there is a link for each movie in database, for example these are some posterLinks for some movies:</p>
  
  <p><a href="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_AL_.jpg" rel="nofollow noreferrer">http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_AL_.jpg</a></p>
  
  <p><a href="http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SY317_CR0,0,214,317" rel="nofollow noreferrer">http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SY317_CR0,0,214,317</a></p>
  
  <p><a href="http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX214_AL_.jpg" rel="nofollow noreferrer">http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX214_AL_.jpg</a></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;fieldset id = "q27"&gt; &lt;legend class="Q27"&gt;&lt;/legend&gt;
  &lt;label class="question"&gt; What are your favorite movies?&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;div class="fieldset content"&gt; 
  &lt;p&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /&gt; 
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="movienames"&gt;
  &lt;a href="#" id="addScnt4"&gt;Add more movies&lt;/a&gt;
  &lt;div id="m_scents"&gt;
  &lt;p&gt;
  &lt;label style="margin-bottom:10px;" for="m_scnts"&gt;
  &lt;input class="autofill4" type="text" id="m_scnt" size="20" name="q27[]"
  value="" placeholder="Enter text" /&gt;
  &lt;/label&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;script type="text/javascript"&gt;
   $(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 = $('&lt;li&gt;'),
    $img = $('&lt;img&gt;');
  
    $img.attr({
     src: item.icon,
     alt: item.label
    });
  
   $li.attr('data-value', item.label);
   $li.append('&lt;a href="#"&gt;');
   $li.find('a').append($img).append(item.label);    
  
    return $li.appendTo(ul);
   };
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is filmsauto.php where I get movies from DB:</p>
  
  <pre><code>&lt;?php
  if (isset($_GET['term'])){
  $return_arr = array();
  
  try {
      $conn=new PDO('mysql:dbname=imdb;host=localhost', 'user', 'pass');
      $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $stmt = $conn-&gt;prepare('SELECT DISTINCT movieName FROM film_Posters WHERE movieName LIKE :term limit 0, 10');
      $stmt-&gt;execute(array('term' =&gt; '%'.$_GET['term'].'%'));
  
      while($row = $stmt-&gt;fetch()) {
        //    $return_arr[] =  $row['movieName'];
                $obj = new stdClass;
                  $obj-&gt;value = $row['movieName']; 
                  $obj-&gt;label = $row['movieName'];
                  $obj-&gt;icon = $row['posterLink'];
                 $return_arr[] = $obj;                    
      }
  } catch(PDOException $e) {
      echo 'ERROR: ' . $e-&gt;getMessage();
  }
  
   echo json_encode($return_arr);
  }
  
  ?&gt;
  </code></pre>
  
  <p>Any suggestion would be highly appreciated,</p>