Typeahead.js and Image Thumbnails

Question

Using Twitter Typeahead.js (https://twitter.github.io/typeahead.js/examples/) on localhost XAMPP, all working great apart from one thing. I can't get image thumbnails to appear in the searchbar once I have selected the suggested item.

So far I have a database with firstname, lastname, release_year and image (the image column contains a link to my images folder with thumbnails /images/thumbnail1.jpg.. /thumbnail2.jpg etc).

When I type into the search bar the firstname, lastname, release_year and thumbnail image does appear, however when I click on the suggested item only the firstname appears in the search bar.

What do I need to change in my code for the image to appear at the left of the name?

My code is as follows;

  $(document).ready(function() {

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: {
    // url points to a json file that contains an array of country names, see
    // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
    url: 'countries.json',
    ttl: 0, 
    // the json file contains an array of strings, but the Bloodhound
    // suggestion engine expects JavaScript objects so this converts all of
    // those strings
    filter: function(list) {
      return $.map(list, function(country) { 

            return { 
            name: country.first_name,
            lastname: country.last_name,
            image: country.image,
            release_year: country.release_year
            }; 
            });
    }
  }
});



// kicks off the loading/processing of `local` and `prefetch`
countries.initialize();

// passing in `null` for the `options` arguments will result in the default
// options being used
$('.demo .typeahead').typeahead(null, {

  displayKey: 'name', // displays the name (title) of book/dvd in the search bar
  engine: Handlebars,
  templates: {
    header: '<h1>Name</h1>',
    empty: [
      '<div class="empty-message">',
      'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<img class="typeahead_photo" src="{{image}}"/> <p><strong>{{name}}</strong></p> <p><em>{{lastname}}</em> </p> <p><em>{{release_year}}</em></p>') // layout of the searchbar results
  },
  engine: Handlebars,
  // `ttAdapter` wraps the suggestion engine in an adapter that
  // is compatible with the typeahead jQuery plugin
  source: countries.ttAdapter()
});

});

This is just in dev, so forgive the code and naming above - I have to to tidy it up!

Unfortunately I can't create a jsfiddle as I am retrieving data from a local json file. If anything else needs axplained please ask.

Answer 1

I have since managed to get this to work.

I had to create a field in my sql db to hold the images, then create a folder in my root directory. upload all of the images there, and reference these images in my sql table field.

Once this was done the images appeared as expected.

Hope it helps.