Bootstrap Typeahead 未按预期显示提示

问题描述

我使用 Typeahead 显示来自项目数据库和商店数据库的提示.当我只显示来自项目的提示时，它显示正常，当我只显示来自商店的提示时也可以正常工作，但是当我尝试显示混合结果时，它只显示默认的空消息.检查 AJAX 答案，在这三种情况下看起来都不错，因此必须在客户端.

JS代码是这样的:

var items = new Bloodhound({datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),queryTokenizer: Bloodhound.tokenizers.whitespace,偏僻的: {url: '/ajax/pesquisar/',准备:功能(查询，设置){token = query.trim().split(' ');return '/ajax/pesquisar/' + tokens.join('/') + '/';}}});$('input.typeahead').typeahead({提示:真实，亮点:真实，最小长度:1},{name: '物品',显示名称'，来源:物品，模板:{空的: ['<div class="空消息">','Nenhum item relacionado','</div>'].join('\n'),建议: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":"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":"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 个提示，现在提前输入而不是显示空消息显示第一个提示而不是其他 3 个提示.

解决方案

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

为了防止这种情况，我只是切换了 1723 和 1724 行，看起来像这样:

that._append(query, Recommendation.slice(0, that.limit - 渲染));呈现 += 建议.长度；

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

I'm using Typeahead to show hints from an items database and a stores database. When I show hints only from items it shows fine, when I show only from stores works fine too, but when I try to show mixed results it just shows the default empty message. Check the AJAX answer and in the three cases it seems fine, so it has to be on the client side.

The JS code is this:

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>')
    }
});

The AJAX response just for items (showing properly):

[
  {
    "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"
  }
]

Just for stores (working fine too):

[
  {
    "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"
  }
]

And when mixing both results (showing the default empty message):

[
  {
    "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"
  }
]

The search string used is "nido"..The only difference I see between them are the trailing zeros in the ID. Converted those IDs to int and still have the same problem. Can anyone see what I'm missing?

Thanks

EDIT: Sliced the results array to 4 hints on the server side and now typeahead instead of showing the empty message shows the first hint and not the other 3.

解决方案

Found the problem. It's a bug in typeahead.bundle.js (v 0.11.1). It's counting the number of rendered hints before appending them, so if the number of hints equals the limit it'll append an empty array.

To prevent this I just switched lines 1723 and 1724 so it looks like this:

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

Already reported the issue in typeahead's github.

这篇关于Bootstrap Typeahead 未按预期显示提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！