typeahead - TypeAhead:错误消息而不是建议数据
问题描述
我正在使用typeahead
库,它正在成功获取数据。但没有将数据加载到建议列表中,而是unable to find any company that match current query
每次都显示。
这是我的代码:
$('#js-typeahead').typeahead({
highlight: true,
minLength: 1
}, {
displayKey: ['title'],
source: function(keywords, result) {
ajaxRequest({
url: '{{ route("admin.companies.auto-complete") }}',
dateType: 'json',
data: {
keywords: keywords,
_token: '{{ csrf_token() }}'
},
success: function(response) {
result($.map(response, function(data) {
return {
'title': data.title,
'token': data.token,
};
}));
}
});
},
templates: {
empty: [
'<div class="empty-message">',
'unable to find any company that match current query',
'</div>'
].join('\n'),
suggestion: function(data) {
return '<a href="' + data.token + '">' + data.title + '</a>';
}
}
});
这是获取的数据
请告诉我我在这里做错了什么。
解决方案
[已解决]:这是我的最终代码...
$('.js-typeahead').typeahead({
hint: false,
highlight: true,
minLength: 1
}, {
displayKey: 'title',
source: (new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '{{ route("admin.{$parent['route']}.auto-complete") }}',
prepare: function (keywords, settings) {
return $.extend({}, settings, {
type: "POST",
contentType: "application/json; charset=UTF-8",
data: JSON.stringify({
keywords: keywords,
_token: '{{ csrf_token() }}'
})
});
}
}
})),
templates: {
empty: '<div class="empty">No result found</div>',
suggestion: function (data) {
return '<div>' + data.title + '</div>';
}
},
}).on('typeahead:asyncrequest', function(event) {
$('.js-typeahead').before('<i class="fas fa-spinner fa-spin loading"></i>');
}).on('typeahead:asyncreceive', function(event) {
$('.js-typeahead').prev('.loading').remove();
}).on('typeahead:selected', function(event, selection) {
// window.location.href = selection.token;
});
我希望这可能对某人有用...
推荐阅读
- c++ - 虽然循环导致 SDL_Rect 和 SDL_Textures 滞后?
- react-native - React 本机应用程序在发布时保留旧版本
- css - 需要多个子级 CSS 帮助的响应式选项卡
- aws-api-gateway - serverless event.body 是一个对象,但内容类型不是 json
- apache-spark - 使用 docker 在 mesos 上运行 spark 客户端模式时出错
- c++ - 未定义符号 boost::system:detail::system_category_instance
- python - Python 最佳实践在子模块中导入子模块
- r - 使用 R 中的 plotly 在等高线图上嵌入/叠加速度向量
- python - Python中类的两个实例之间共享的变量
- javascript - 如何将 ChartJS 条形对齐到左侧?