Typeahead 在 Rails 应用程序上显示空下拉列表

如何解决Typeahead 在 Rails 应用程序上显示空下拉列表

我正在尝试在我的 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（最新）