twitter-bootstrap – Bootstrap Typeahead没有按预期显示提示

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap Typeahead没有按预期显示提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Typeahead来显示项目数据库和商店数据库中的提示.当我只显示项目的提示时,它显示正常,当我只显示商店的工作也很好,但当我尝试显示混合结果时,它只显示默认的空信息.检查 AJAX答案,在三种情况下看起来很好,所以它必须在客户端.

JS代码是这样的:

var items = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {
    url: '/ajax/pesquisar/',prepare: function(query,settings) {
      tokens = query.trim().split(' ');
      return '/ajax/pesquisar/' + tokens.join('/') + '/';
    }
  }
});

$('input.typeahead').typeahead({
    hint: true,highlight: true,minLength: 1
},{
    name: 'items',display: 'name',source: items,templates: {
      empty: [
        '<div class="empty-message">','Nenhum item relacionado','</div>'
      ].join('\n'),suggestion: Handlebars.compile('<a href="{{url}}"><div class="suggestion"><div class="icone" style="background-image:url({{img}});"></div>{{name}}</div></a>')
    }
});

AJAX响应仅适用于项目(正确显示):

[
  {
    "id":"00007531","url":"\/higiene-e-limpeza\/cabelos\/condicionador-seda-cachos-comportados-e-definidos-350ml\/","name":"Condicionador Seda Cachos Comportados e Definidos 350mL","img":"\/img\/produtos\/7891037000315_I.png"
  },{
    "id":"00007641","url":"\/higiene-e-limpeza\/cabelos\/shampoo-seda-cachos-comportados-e-definidos-350ml\/","name":"Shampoo Seda Cachos Comportados e Definidos 350mL","img":"\/img\/produtos\/7891037000308_I.png"
  }
]

仅适用于商店(工作正常):

[
  {
    "id":"00000001","url":"\/nidoBox\/montese\/","name":"Supermercado NidoBox - Montese","img":"\/img\/supermercados\/nidoBox_i.jpg"
  },{
    "id":"00000002","url":"\/nidoBox\/damas\/","name":"Supermercado NidoBox - Damas",{
    "id":"00000003","url":"\/nidoBox\/aeroporto\/","name":"Supermercado NidoBox - Aeroporto","img":"\/img\/supermercados\/nidoBox_i.jpg"
  }
]

当混合两个结果时(显示默认的空消息):

[
  {
    "id":"7531",{
    "id":"7641","img":"\/img\/produtos\/7891037000308_I.png"
  },{
    "id":"1",{
    "id":"2",{
    "id":"3","img":"\/img\/supermercados\/nidoBox_i.jpg"
  }
]

使用的搜索字符串是“nido”.
.
我看到的唯一区别是ID中的尾随零.将这些ID转换为int并仍然存在相同的问题.任何人都能看到我错过的东西吗?

谢谢

编辑:在服务器端将结果数组切成4个提示,现在输入而不是显示空消息显示第一个提示而不是其他3.

解决方法

发现了问题.这是typeahead.bundle.js(v 0.11.1)中的一个错误.它在追加它们之前计算渲染提示数量,因此如果提示数等于限制,它将附加一个空数组.

为了防止这种情况,我只是改变了第1723和1724行,所以它看起来像这样:

that._append(query,suggestions.slice(0,that.limit - rendered));
rendered += suggestions.length;

已经在typeahead的github中报告了这个问题.

猜你在找的Bootstrap相关文章