现在Bootstrap已经放弃了typeahead,他们推荐使用本地的twitter typeahead(在撰写本文时为0.9.3)。
我无法找到如何在没有结果时提示用户的示例。
在原生的Bootstrap中,您可以这样做:http://bootply.com/61459 也许这种功能不可能实现?
我无法找到如何在没有结果时提示用户的示例。
在原生的Bootstrap中,您可以这样做:http://bootply.com/61459 也许这种功能不可能实现?
这个怎么样?
$(document).ready(function() {
$("#search").typeahead([
{
limit: 10,
remote: {
url: "//my.tld/gimmesomejson.php?searchuser=%QUERY",
filter: function(parsedResponse) {
var dataset = [];
for (i = 0; i < parsedResponse.length; i++) {
dataset.push({
value: parsedResponse[i].value,
tokens: parsedResponse[i].tokens
});
}
if (parsedResponse.length == 0) {
dataset.push({
value: "No results"
});
}
return dataset;
},
},
template: '<p>{{value}}</p>',
engine: Hogan
}
]);
});
我尝试了这个方法,对我来说效果很好。
在这里,我使用Bootstrap弹出框来显示“未找到结果”。
$('#facility_names'+id).typeahead({
items: "all",
source : function (query, result) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
$.ajax({
url: master_url + "/facility_name_dropdown_list",
method: 'POST',
xhrFields: {
withCredentials: false
},
data: { input_query : query},
success: function (data) {
if(Object.keys(data.facility_name).length > 0){
$("#facility_names"+id).popover('destroy');
result($.map(data.facility_name, function (item) {
return item;
}));
}
else{
$('#facility_names'+id).popover({container: '#botdiv'+id,placement: 'top'}).popover('show');
$('#facility_names'+id).attr('data-content','No result found for \"'+$("#facility_names"+id).val()+'\"').data('bs.popover').setContent();
setTimeout(function () {
$('#facility_names'+id).popover('destroy');
}, 2000);
}
}
});
}, 300);
},
hint: true,
highlight: true,
cache: true,
compression: true,
minLength: 3,
updater: function(item) {
var details = "";
$.ajax({
url: master_url + "/get_facility_name",
method: 'POST',
xhrFields: {
withCredentials: false
},
data: { facility_name : item},
success: function (data) {
console.log(data.status);
}
});
return item;
}
});