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

时间:2017-01-24 15:07:38

标签: ruby-on-rails ruby ajax autocomplete selectize.js

我正在做两天的“简单”任务。在我的rails应用程序中添加表单中的自动填充字段。

我正在运行ruby 2.3.3和rails 5.0.1。到目前为止,我已经尝试了许多不同的选项,例如: - Elasticsearch - Rails-jquery-autocomplete

现在我要去selectize.js。我将gem添加到我的gemfile中:

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示例从here获取):

$('.test-selectize').selectize({
    valueField: 'title',
    labelField: 'title',
    searchField: 'title',
    options: [],
    create: false,
    render: {
        option: function(item, escape) {
          return '<div>' +
                      '<span class="title">' +
                          '<span class="ciccioname">' + item.name + '</span>' +
                      '</span>' +
                  '</div>';
        }
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: '/users-interests-search',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                console.log(res);
                console.log(res[0].name)
                $('selectize-dropdown-content').append('<span class="ciccioname">' + res[0].name + '</span>')
            }
        });
    }
  });

虽然我确实看到了AJAX调用并且返回了JSON,但实际页面上的内容并不多。

对此问题的任何建议都非常受欢迎(或任何其他类型的帮助,以使自动完成系统启动和运行:))。

干杯! 安德烈

更新:这是更改ajax调用后的控制台输出(见上文)

Console screenshot

1 个答案:

答案 0 :(得分:0)

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

这是我的控制者:

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插件):

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