javascript - Twitter typeahead - 为什么它只匹配一个结果？

Question

我正在使用 Twitter Typeahead 插件:

https://twitter.github.io/typeahead.js/

这是我正在使用的代码:

$(document).ready( function() {

  var bestPictures = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '/cgi-bin/admin-daily.cgi',
    remote: {
      url: '/cgi-bin/admin-daily.cgi?q=%QUERY',
      wildcard: '%QUERY',
      filter: function (parsedResponse) {
            console.log(parsedResponse);
            return parsedResponse;
        }
    }
  });

  $('#showSearchResults .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: bestPictures,
    templates: {
      empty: [
        '<div class="empty-message">',
          'unable to find any matches',
        '</div>'
      ].join('\n'),
       suggestion: function(data){
         console.log(data);
         return Mark.up("<img src=\"{{image_url}}\" style=\"height:50px\"> <strong>xx{{title}}yy</strong>", data);
       }
    }
  });

});

现在，这有点有效 - 但它似乎只得到 1 个结果。以下是随我的请求返回的 JSON:

[{"image_url":"https://steampunk-d72.kxcdn.com/daily/7/817-YlMCxegOPpB5Dsob8rw.jpg ","title":" Steam 朋克 自行车","id":"819"},{"image_url":"https://steampunk-d72.kxcdn.com/daily/1/1041-w0ScJAzItAnL3iFL7Ji1A.jpg ”,"title":" Steam 朋克自行车","id":"1043"},{"image_url":"https://steampunk-d72.kxcdn.com/daily/4/834-vhJ2bLI9yLdGAbfGetiewA.jpg","title":"詹姆斯·赖斯用勺子制成的自行车","id":"836"},{"image_url":"https://steampunk-d72.kxcdn.com/daily/0/1490-Iqr6FlNjgRgzTRKEYMBq1A.jpg","title":"ilmecca produzioni 自行车零件灯 ","id":“1494”}]

...正如您所看到的，有多个条目，但由于某种原因，它似乎在第一个条目之后“停止”:

起初我以为这是我的代码的问题，但我不太确定。也许其他人可以发现发生了什么事？

上图中第34行是:

 console.log(data);

...在循环内(这让我感到困惑，因为它只显示 1 个转储 - 而不是几个，这是在 JSON 中返回的内容)

Answer 1

我不太清楚为什么 - 但它决定现在就可以工作!

  $('#showSearchResults .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: bestPictures,
    templates: {
      empty: [
        '<div class="empty-message">',
          'unable to find any matches',
        '</div>'
      ].join('\n'),
       suggestion: function(data){
         return Mark.up("<div class=\"view-daily\" rel=\"{{id}}\"><img src=\"{{image_url}}\" style=\"height:50px\"> <strong>{{title}}</strong></div><br>", data);
       }
    }
  });

我真正做的就是取出console.log()调用suggestion:`部分 - 不知道为什么会修复它，但它似乎有:)