[英]Select2 with Rails and JSON
I am trying to use select2 with my rails application but cannot get the result displayed in my views. 我试图在我的rails应用程序中使用select2,但无法在我的视图中显示结果。 I see the correct json coming in chrome console but cannot get the result displayed in the dropdown ... 我看到正确的json进入chrome控制台,但无法在下拉列表中显示结果...
Could you please help me ? 请你帮助我好吗 ?
Thanks : 谢谢 :
Controllers : 控制器:
def friends
if params[:term]
@users = User.where{ ( (first_name =~ my{"%#{params[:term]}%"}) | (last_name =~ my{"%#{params[:term]}%"}) | ( ((first_name.op('||', ' ')).op('||',last_name)) =~ my{"%#{params[:term]}%"}) | ( ((last_name.op('||', ' ')).op('||',first_name)) =~ my{"%#{params[:term]}%"}) ) & ( adult==false ) }
end
respond_to do |format|
format.html
format.json { render :json =>{:results => @users.to_json(only: [:id, :first_name, :last_name]) }}
end
end
My Javascript : 我的Javascript:
$("#teen_search").select2({
placeholder: "Search for a teen",
minimumInputLength: 2,
ajax: {
url: "/friends.json",
dataType:'json',
data: function (search, page) {
return {
term: search, // search term
page_limit: 10,
};
},
results: function (data, page) {
return data;
}
},
dropdownCssClass: "bigdrop"
});
I cannot figure what's wrong, thanks for your help 我不知道出了什么问题,谢谢你的帮助
I just edited the controller render_to json and the results in js to fix an error in the chrome console, I know I am close but still cannot get my user first_name and last_name displayed in the field ... 我刚刚编辑了控制器render_to json和js中的结果来修复chrome控制台中的错误,我知道我很接近但仍然无法让我的用户first_name和last_name显示在字段中...
So I ended up doing that : 所以我最终这样做了:
User_Controller : User_Controller:
def friends
if params[:term]
@users = User.where{ ( (first_name =~ my{"%#{params[:term]}%"}) | (last_name =~ my{"%#{params[:term]}%"}) | ( ((first_name.op('||', ' ')).op('||',last_name)) =~ my{"%#{params[:term]}%"}) | ( ((last_name.op('||', ' ')).op('||',first_name)) =~ my{"%#{params[:term]}%"}) ) & ( adult==false ) }.select("id,first_name,last_name,avatar,uid")
@user = @users.paginate(:page => params[:page], :per_page => params[:page_limit])
end
respond_to do |format|
format.html
format.json {
render :json => {
:users => @user,
:total => @users.count,
:links => { :self => @user.current_page , :next => @user.next_page}
}
}
end
end
In the JS Script : 在JS脚本中:
$(document).ready(function() {
$("#teens_select2").select2({
placeholder: "Search for a teen",
minimumInputLength: 1,
ajax: {
url: "/friends.json",
dataType: 'json',
quietMillis: 300,
data: function (search, page) {
return {
term: search,
page_limit: 10,
page: page,
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {results: data.users, more: more};
}
},
formatResult: movieFormatResult,
formatSelection: movieFormatSelection,
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
});
Also formatResult and formatSelection are configured like that before you load the script : 在加载脚本之前,formatResult和formatSelection也是这样配置的:
function movieFormatResult(user) {
var markup = "<table class='movie-result'><tr>";
if ( user.uid !== null) {
markup += "<td class='movie-image'><img src='" + user.avatar + "'/></td>";
}
else if (user.uid == null) {
var gravatar = user.avatar + 40
markup += "<td class='movie-image'><img src='" + gravatar + "'/></td>";
}
markup += "<td class='movie-info'><div class='movie-title'>" + user.first_name +' '+ user.last_name + "</div>";
markup += "</td></tr></table>"
return markup;
}
function movieFormatSelection(user) {
return (user.first_name + ' ' + user.last_name);
}
And the in the view : 在视图中:
<input type ="hidden" id="teens_select2"></input>
I really hope it can be useful. 我真的希望它有用。
只需在dataType属性中通过'json'更改'jsonp'即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.