问题描述
我正在尝试在我的 Rails 应用中创建一个自动完成下拉菜单。我已经为此苦苦挣扎了一段时间,我已经阅读了很多指南/stackoverflow 问题,但我一直无法解决。
输入框:
<%= text_field_tag :query,params[:query],id: 'product_search',class: "search-bar ml-3 typeahead",placeholder: "Zoeken...",autocomplete: :off,value: params[:query] %>
应用程序.js
var ready;
ready = function() {
var engine = new Bloodhound({
datumTokenizer: function(d) {
console.log(d);
return Bloodhound.tokenizers.whitespace(d.title);
},queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {
url: '/products/autocomplete?query=%QUERY',wildcard: '%QUERY'
}
});
var promise = engine.initialize();
$('#product_search').typeahead(null,{
name: 'products',displayKey: 'name',source: engine.ttAdapter()
});
}
$(document).ready(ready);
$(document).on('page:load',ready);
产品控制器:
def autocomplete
render json: Product.search(params[:query]).pluck(:name)
end
我使用 CURL 和调试器测试了自动完成方法,并在数组中获得了我想要的结果,就像我搜索“iphone”时一样:
[“iPhone 10”、“iPhone 11”]
但我的应用程序看起来像这样:
我没有使用 Bloodhound 或 Typeahead 的经验,因此将不胜感激任何帮助或建议。
Rails 5.2.6 | 红宝石 2.7.3 | Twitter Typeahead 0.11.1(最新)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)