Typeahead.js和图像缩略图

Typeahead.js and Image Thumbnails

本文关键字:略图 图像 js Typeahead      更新时间:2023-09-26

在本地主机XAMPP上使用Twitter Typeahead.js (https://twitter.github.io/typeahead.js/examples/),除了一件事之外,所有工作都很好。我不能让图像缩略图出现在搜索栏中,一旦我选择了建议的项目。

到目前为止,我有一个数据库与firstname, lastname, release_yearimage(图像列包含链接到我的图像文件夹与缩略图/images/thumbnail1.jpg ../thumbnail2.jpg等等)。

当我在搜索栏中输入firstname, lastname, release_yearthumbnail图像时确实出现了,但是当我点击建议项目时,只有名字出现在搜索栏中。

我需要在代码中更改什么才能使图像出现在名称的左侧?

我的代码如下;

  $(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()
});
});

这只是在开发中,所以原谅上面的代码和命名-我必须整理它!

不幸的是,我不能创建一个jsfiddle,因为我正在从本地json文件检索数据。

我已经设法使这个工作。

我必须在sql数据库中创建一个字段来保存图像,然后在根目录中创建一个文件夹。上传所有的图像,并在我的SQL表字段中引用这些图像。

操作完成后,图像按预期显示。

希望能有所帮助。