Bootstrap Typeahead 未按预期显示提示
Bootstrap Typeahead not showing hints as expected
我正在使用 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 个提示,现在输入提示而不是显示空消息显示第一个提示而不是其他 3 个提示。
找到问题了。这是 typeahead.bundle.js (v 0.11.1) 中的错误。它在附加它们之前计算呈现的提示的数量,因此如果提示的数量等于限制,它将附加一个空数组。
为了防止这种情况,我只是切换了 1723 和 1724 行,所以它看起来像这样:
that._append(query, suggestions.slice(0, that.limit - rendered));
rendered += suggestions.length;
已在 typeahead 的 github 中报告了该问题。
@Luciano Garcia Bes - 为了完成您的回答,下面我 post 所有需要的更改:
您有权切换这些行,但我也需要删除 - rendered
。
所以最后它看起来像这样(整个函数):
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);
}
}
有关此问题的更多信息:https://github.com/twitter/typeahead.js/issues/1415
如果您使用的是托管 CDN 版本,另一种解决此问题的方法是在启动时设置 limit:'Infinity'
:
$(".input-search").typeahead({
hint: true,
highlight: true,
minLength: 2,
}, {
limit:'Infinity',
source: engine,
});
然后在服务器上限制结果
我正在使用 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 个提示,现在输入提示而不是显示空消息显示第一个提示而不是其他 3 个提示。
找到问题了。这是 typeahead.bundle.js (v 0.11.1) 中的错误。它在附加它们之前计算呈现的提示的数量,因此如果提示的数量等于限制,它将附加一个空数组。
为了防止这种情况,我只是切换了 1723 和 1724 行,所以它看起来像这样:
that._append(query, suggestions.slice(0, that.limit - rendered));
rendered += suggestions.length;
已在 typeahead 的 github 中报告了该问题。
@Luciano Garcia Bes - 为了完成您的回答,下面我 post 所有需要的更改:
您有权切换这些行,但我也需要删除 - rendered
。
所以最后它看起来像这样(整个函数):
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);
}
}
有关此问题的更多信息:https://github.com/twitter/typeahead.js/issues/1415
如果您使用的是托管 CDN 版本,另一种解决此问题的方法是在启动时设置 limit:'Infinity'
:
$(".input-search").typeahead({
hint: true,
highlight: true,
minLength: 2,
}, {
limit:'Infinity',
source: engine,
});
然后在服务器上限制结果