Question

我正在使用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",
    "img":"\/img\/supermercados\/nidobox_i.jpg"
  },
  {
    "id":"00000003",
    "url":"\/nidobox\/aeroporto\/",
    "name":"Supermercado Nidobox - Aeroporto",
    "img":"\/img\/supermercados\/nidobox_i.jpg"
  }
]

混合两个结果时（显示默认的空信息）：

[
  {
    "id":"7531",
    "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":"7641",
    "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":"1",
    "url":"\/nidobox\/montese\/",
    "name":"Supermercado Nidobox - Montese",
    "img":"\/img\/supermercados\/nidobox_i.jpg"
  },
  {
    "id":"2",
    "url":"\/nidobox\/damas\/",
    "name":"Supermercado Nidobox - Damas",
    "img":"\/img\/supermercados\/nidobox_i.jpg"
  },
  {
    "id":"3",
    "url":"\/nidobox\/aeroporto\/",
    "name":"Supermercado Nidobox - Aeroporto",
    "img":"\/img\/supermercados\/nidobox_i.jpg"
  }
]

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

由于

编辑：将结果数组切换为服务器端的4个提示，现在是typeahead而不是显示空消息显示第一个提示而不是其他3个提示。

Answer 1

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

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

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

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

Answer 2

@Luciano Garcia Bes - 要完成你的anwser，请在下面发布所需的所有更改：你有必要切换这些行，但我也需要删除- rendered。所以最后它sholud看起来像这样（整个功能）：

            function async(suggestions) {
                suggestions = suggestions || [];
                if (!canceled && rendered < that.limit) {
                    that.cancel = $.noop;
                    that._append(query, suggestions.slice(0, that.limit));
                    rendered += suggestions.length;
                    that.async && that.trigger("asyncReceived", query);
                }
            }

有关此iisue的更多信息：https://github.com/twitter/typeahead.js/issues/1415

Answer 3

如果您使用托管的CDN版本，解决此问题的另一个选项是在启动时设置limit:'Infinity'：

$(".input-search").typeahead({
        hint: true,
        highlight: true,
        minLength: 2,
    }, {
        limit:'Infinity',
        source: engine,           
    });

然后限制服务器上的结果

Bootstrap Typeahead未按预期显示提示

3 个答案: