jquery - RailsとJSONを使用したSelect2

Question

Railsアプリケーションでselect2を使用しようとしていますが、ビューに結果が表示されません。正しいjsonがChromeコンソールに表示されますが、ドロップダウンに結果が表示されません...

手伝っていただけませんか ？

ありがとう ：

コントローラー：

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

私の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"
});

何が悪いのかわからない、助けてくれてありがとう

コントローラーrender_tojsonと結果をjsで編集して、Chromeコンソールのエラーを修正しました。近くにいることはわかっていますが、ユーザーのfirst_nameとlast_nameをフィールドに表示できません...

Answer 1

だから私はそれをすることになった：

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

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
    });
});

また、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);
}

そして、ビューで：

<input type ="hidden" id="teens_select2"></input>

お役に立てば幸いです。

Answer 2

dataType属性の「jsonp」を「json」に変更するだけです。