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

时间:2014-03-31 15:10:14

标签: json jquery-plugins handlebars.js typeahead.js bloodhound

我正在使用typeahead.js0.10,带有猎犬引擎和把手模板。在血腥引擎中,我传递了一个varialbe作为在输入字段上搜索的变种。

然而,在键入时,我希望模板显示对象的其他变量(例如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
    }
 ]

1 个答案:

答案 0 :(得分:0)

修改过滤器,使其在返回的JavaScript对象中包含release_date:

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

然后你的建议功能应该显示release_date。