twitter-bootstrap 从 Jquery-ui 自动完成到 typeahead.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16573619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
From Jquery-ui autocomplete to typeahead.js
提问by Arnaud Gourlay
I am migrating my app to twitter-bootstrap and i would like to replace my jquery-ui autocomplete with typeahead.js.
我正在将我的应用程序迁移到 twitter-bootstrap，我想用 typeahead.js 替换我的 jquery-ui 自动完成。
It would be better to use the feature embedded in twitter-bootstrap but i am ok with the extra typeahead plugin if necessary.
最好使用嵌入在 twitter-bootstrap 中的功能，但如果有必要，我可以使用额外的 typeahead 插件。
My problem is that i have trouble reproducing the current behaviour especially with the absence of results.
我的问题是我无法重现当前的行为，尤其是在没有结果的情况下。
How would you do something like that?
你会怎么做这样的事情？
$("#search").autocomplete({
source : myUrl,
delay : 100,
minLength : 2,
select : function(event, ui) {
// do whatever i want with the selected item
},
response : function(event, ui) {
if (ui.content.length === 0) {
ui.content.push({
label : "No result",
value : customValue
});
}
}
});
Basically, if there is no result, i want to display a custom message in the component.
基本上，如果没有结果，我想在组件中显示自定义消息。
Thanks!
谢谢！
采纳答案by Arnaud Gourlay
With the latest version of Typeahead.js (0.10) it is now possible to specify an empty template to display when no results are found.
使用最新版本的 Typeahead.js (0.10)，现在可以指定一个空模板在未找到结果时显示。
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},{
name: 'examples',
source: examples.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any results that match the current query',
'</div>'
].join('\n')
}
});
回答by Zim
The migration to Bootstrap typeahead would look something like..
迁移到 Bootstrap typeahead 看起来像..
$('.typeahead').typeahead({
minLength:2,
updater: function (item) {
/* do whatever you want with the selected item */
},
source: function (typeahead, query) {
/* put your ajax call here..
return $.get('/typeahead', { query: query }, function (data) {
return typeahead.process(data);
});
*/
}
});
EDIT:
编辑：
I've updated the demo to include a sorterand highlighter. I think this will get you the results you want..
我已经更新了演示以包含一个sorter和highlighter。我认为这会让你得到你想要的结果..
sorter: function(items) {
if (items.length == 0) {
var noResult = new Object();
items.push(noResult);
}
return items;
},
highlighter: function(item) {
if (dataSource.indexOf(item) == -1) {
return "<span>No Match Found.</span>";
}
else {
return "<span>"+item+"</span>";
}
},
Bootstrap Typeahead Demo
Bootstrap 预先输入演示
I don't think the typeahead has an equivalent to delay, but there are some jquery workarounds for this.
我不认为 typeahead 相当于延迟，但是有一些 jquery 解决方法。
