0

所以,我刚刚发现了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或任何地方的响应,并返回单个值 for Taylor(在那种情况下)。但是当我在 select2 搜索框内搜索时,它只是旋转和旋转,没有结果。没有控制台错误,这很好,哈。想法?谢谢!

4

2 回答 2

2

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

然后在 index 方法中:

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 的视图。

于 2013-05-09T15:48:37.363 回答
1

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

于 2013-05-09T15:38:52.813 回答