twitter-bootstrap – Bootstrap Typeahead没有按预期显示提示
发布时间:2020-12-18 00:28:41 所属栏目:安全 来源:网络整理
导读:我正在使用Typeahead来显示项目数据库和商店数据库中的提示.当我只显示项目的提示时,它显示正常,当我只显示商店的工作也很好,但当我尝试显示混合结果时,它只显示默认的空信息.检查 AJAX答案,在三种情况下看起来很好,所以它必须在客户端. JS代码是这样的: va
我正在使用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”. 谢谢 编辑:在服务器端将结果数组切成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中报告了这个问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |