json - 在 typeahead 0.10 车把模板中显示几个 json 变量的正确方法是什么？

Question

我正在使用带有寻血猎犬引擎和车把模板的typeahead.js版本。0.10在猎犬引擎中，我传递了一个变量作为要在输入字段中搜索的变量。

不过，在键入时，我希望模板显示对象的其他变量（例如 value_to_be_searched = name 和 other_vars = location || last_name 等...

在下面的示例中movies.json，我还想显示release_date变量及其默认值original_title.

  var movies = new Bloodhound({
    datumTokenizer: function(d) { return  Bloodhound.tokenizers.whitespace(d.value); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
      url:'http://localhost/dh/js/movies.json',
      filter: function(data) {
        return $.map(data, function(movie) { 
          return { value: movie.original_title}; 
        });
      }
    }
  });

  movies.initialize();

  $('#cenas5').typeahead(null,
  {

    name: 'movies ',
    displayKey: 'value',
    source: movies .ttAdapter(),
    templates: {
      header: '<h3 class="">Users</h3>',
      empty: [
      '<div class="empty-message">',
      'unable to find any matches',
      '</div>'
      ].join('\n'),
      suggestion: Handlebars.compile('<p><strong>{{value}}</strong> - {{release_date}}</p>')
    }
  });

JSON文件：

"movies":[
    {
        "adult": false,
        "backdrop_path": "/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg",
        "id": 550,
        "original_title": "Fight Club",
        "release_date": "1999-10-15",
        "poster_path": "/2lECpi35Hnbpa4y46JX0aY3AWTy.jpg",
        "popularity": 61151.745000000003,
        "title": "Fight Club",
        "vote_average": 9.0999999999999996,
        "vote_count": 174
    },
    {
        "adult": false,
        "backdrop_path": "/5Z0FScA1bB6EbdGmZCUBeUk32eV.jpg",
        "id": 14476,
        "original_title": "Clubbed",
        "release_date": "2008-10-02",
        "poster_path": "/bl6PEQtmohEP1zP9srNZY6bXyHg.jpg",
        "popularity": 1.7290000000000001,
        "title": "Clubbed",
        "vote_average": 7.7999999999999998,
        "vote_count": 3
    }
 ]

Answer 1

修改您的过滤器，使其在返回的 JavaScript 对象中包含 release_date：

filter: function(data) {
 return $.map(data, function(movie) { 
  return { 
   value: movie.original_title,
   release_date: movie.release_date
  }; 
 });
}

然后，您的建议功能应显示 release_date。