Question

所以，我刚刚发现select2。真棒。现在我想弄清楚如何使用它，服务器端使用ajax / json。我看到的所有示例，无处不在，使用带有JSONP的select2来从外部源检索数据。如果从本地模特打电话，我觉得这应该更容易，不是吗？我会正确对待细节。 json返回一个值，但搜索框没有自动完成，它保持空白。

查看html：

<%= form_tag request_pal_path, remote: true do %>
  <%= hidden_field_tag :email, nil, class: 'ui-corner-all' %>
  <%= submit_tag "Send request", class: 'button' %>
<% end %>

并在其上调用一些js：

$(document).ready(function() {
  $("#find_user #email").select2({
    width: '400px',
    placeholder: "Find user...",
    minimumInputLength: 1,
    multiple: false,
    id: function(obj) {
      return obj.id; // use slug field for id
    },
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
      url: "/users",
      dataType: 'json',
      data: function (term, page) {
        return {
          q: term, // search term
          page_limit: 10
        };
      },
      results: function (data, page) { // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to alter remote JSON data
        return {results: data};
      }
    },
    formatResult: FormatResult,
    formatSelection: FormatSelection,
    escapeMarkup: function (m) { return m; }
  });

})

function FormatResult(user) {
  return '<div>' + user.name + '</div>';
}

function FormatSelection(user) {
  return user.name;
}

进入控制器，user index action：

def index
  @find = User.where('name LIKE ?', "%#{params[:q]}%")
  @users = @find.where('id NOT IN (?)', current_user.id).order('random()').page(params[:page]).per(100)
  @title = "Potential pals"
  respond_to do |format|
    format.html
    format.js {
      @find = @find
      @users = @users
    }
    format.json { @find }
  end
end

我制作了一个.json文件供它回复（不确定是否有必要）：

<% @find.each do |user| %>
  <%= user.name %>
<% end %>

所以，json在某种程度上正在发挥作用。如果我查看开发人员控制台，它会显示来自http://localhost:3000/users.json?q=tay或来自Taylor的响应，并为{{1}}（在该实例中）返回单个值。但是当我在select2搜索框内搜索时，它只是旋转和旋转，没有结果。没有控制台错误，所以这很好，哈。思考？谢谢！

Answer 1

select2插件需要以下格式的JSON数据：

[ { "text": "Taylor", "id": 1 }, { "text" : "Tailor", "id": 2 }, ...]

因此，在转换为JSON时，您需要在用户模型中将name替换为text：

def as_json(*args)
    super.tap { |hash| hash["text"] = hash.delete "name" }
end

然后在索引方法中：

def index
  @find = User.where('name LIKE ?', "%#{params[:q]}%")
  @users = @find.where('id NOT IN (?)', current_user.id).order('random()').page(params[:page]).per(100)
  @title = "Potential pals"
  respond_to do |format|
    format.html
    format.js {
      @find = @find
      @users = @users
    }
    format.json { render json: @find, :only => [:text, :id] }  # might be :name here ?
  end
end

并且您不需要JSON视图。

Answer 2

我猜问题出在你的.json文件中，因为select2需要json数组或json对象。尝试删除它并回复format.json { render json: @find.to_json }。其他代码对我来说似乎没问题。

select2 AJAX到模型，配置

2 个答案: