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

时间:2015-11-14 15:22:18

标签: javascript jquery twitter

我正在使用 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”, “标题”:“蒸汽朋克  自行车”, “ID”: “819”},{ “IMAGE_URL”: “https://steampunk-d72.kxcdn.com/daily/1/1041-w0ScJAzItAnL3iFL7Ji1A.jpg” ,“title”:“Steampunked Bike”,“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”}]

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

enter image description here

起初我认为这是我的代码的问题,但我不太确定。也许其他人可以发现最新情况?

上图中的第34行是:

 console.log(data);

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

1 个答案:

答案 0 :(得分:0)

我不太清楚为什么 - 但它决定立即行动!

  $('#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()call inside the建议:`部分 - 不确定为什么会修复它,但似乎有:)