所以,我刚刚发现了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 搜索框内搜索时,它只是旋转和旋转,没有结果。没有控制台错误,这很好,哈。想法?谢谢!