Ruby on rails 使用selectize.js向rails应用程序添加自动完成功能

两天来，我一直在为一项“简单”的任务奋斗。在MyRails应用程序的表单中添加自动完成字段

我正在运行ruby 2.3.3和rails 5.0.1。到目前为止，我已经尝试了许多不同的选择，例如： -弹性搜索 -Rails jquery自动完成

现在我要去selectize.js。我将gem添加到我的gem文件中：

gem "selectize-rails"

我已经将其包含在application.js中

//= require jquery
//= require jquery_ujs
//= require selectize
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
//= require main

我在控制器中创建了一个操作，该操作以json格式从名为Interests的表返回数据：

def users_interests_search
    @interests = Interest.all
    respond_to do |format|
        format.js {}
        format.json {render json: @interests}
    end
end

在我的脚本中，我使用了以下内容（摘自rottenTomato示例）：

$（'.test selectize'）。selectize({
valueField:“标题”，
拉贝尔菲尔德：“头衔”，
searchField:'标题'，
选项：[]，
创建：false，
呈现：{
选项：功能（项目，转义）{
返回“”+
'' +
''+项目名称+''+
'' +
'';
}
},
加载：函数（查询、回调）{
如果（！query.length）返回callback（）；
$.ajax({
url:“/用户兴趣搜索”，
键入：“GET”，
数据类型：“json”，
成功：功能（res）{
控制台日志（res）；
console.log（res[0].name）
$（'selectize-dropdown-content'）。追加（“”+res[0]。名称+“”）
}
});
}
});

虽然我确实看到了AJAX调用和JSON返回，但在实际页面上并没有进行太多操作

任何关于这个问题的建议都是非常受欢迎的（或者任何其他类型的帮助都可以让自动完成系统启动并运行起来：）

干杯！ 安德烈

更新：这是更改ajax调用后的控制台输出（参见上文）

---

最终我选择了一个更简单的解决方案

这是我的控制器：

def users_interests_search
    term = params[:term] || nil
    @interests = Interest.where('name LIKE ?', "%#{term}%") if term

    @names = []

    @interests.each do |i|
        @names.push(i.name)
    end

    respond_to do |format|
        format.js {}
        format.json {render json: @names}
    end
end

这是我的观点（使用tagsInput jQuery插件）：

---

最终我选择了一个更简单的解决方案

这是我的控制器：

def users_interests_search
    term = params[:term] || nil
    @interests = Interest.where('name LIKE ?', "%#{term}%") if term

    @names = []

    @interests.each do |i|
        @names.push(i.name)
    end

    respond_to do |format|
        format.js {}
        format.json {render json: @names}
    end
end

这是我的观点（使用tagsInput jQuery插件）：

---

您在浏览器的控制台中看到了什么？我在猜某种错误？您的后端似乎发送了一个感兴趣的数组，但您只调用

res.name

，而不进行迭代。嘿@Wukerplank-是的，我确实应该迭代该数组，但是我仍然通过使用res[0]获得相同的行为。name（登录控制台时显示我正在查找的数据）。您可以在浏览器中添加收到的结果吗？也许它的根是一本字典，你需要调用

res['interests'][0]。name

当然，你有它！您在浏览器的控制台中看到了什么？我在猜某种错误？您的后端似乎发送了一个感兴趣的数组，但您只调用

res.name

，而不进行迭代。嘿@Wukerplank-是的，我确实应该迭代该数组，但是我仍然通过使用res[0]获得相同的行为。name（登录控制台时显示我正在查找的数据）。您可以在浏览器中添加收到的结果吗？也许它的根是一本字典，你需要调用

res['interests'][0]。name

当然，你有它！

$('.ajax-autocomplete').tagsInput({
    autocomplete_url: "/users-interests-search?term=" + $('.ajax-autocomplete').val()
  });