Question

I am using this gem for autocomplete feature:

https://github.com/argerim/select2-rails and select2.

This is my action:

def autocomplete_subject
   @messages = Message.where(:by_the_system => nil).page(params[:page]).per(params[:page_limit])
    messages = Array.new
    @messages.each do |m|
      element = Hash.new
      element[:id] = m.id
      element[:text] = [m.subject].join(' ')
      messages << element
    end
   results = Hash.new
   results[:results] = messages
   respond_to do |format| 
     format.json { 
      render :json => {
        :results => results,
        :total => @messages.count,
     } 
    }
  end
 end

This is my javascript:

function messageFormatSelection(message) {
  return message.subject;
}

$("#search_boxes #subject").select2({
        minimumInputLength: 3,
        multiple: true,
        width: "300px;",
        ajax: {
            url: "/admin/messages/autocomplete_subject_nil.json",
            dataType: 'json',
            quietMillis: 100,
            data: function (term, page) { // page is the one-based page number tracked by Select2
                return {
                    subject: term, //search term
                    page_limit: 5, // page size
                    page: page, // page number
                };
            },
            results: function (data, page) {
            var more = (page * 5) < data.total;                
              return {results: data.results, more: more};
            }
        },
        formatSelection: messageFormatSelection // omitted for brevity, see the source of this page
   });

This is my json view:

{"results":{"results":[{"id":"50b4f5c01d41c811fb000014","text":"Microfunc con id: 50ae41011d41c86ad8000004"},{"id":"50b4f8d31d41c811fb000026","text":"Re: Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4fcf61d41c811fb00002e","text":"Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4fe531d41c811fb000032","text":"Re: Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4ff431d41c811fb000038","text":"Re: Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4f5d71d41c811fb000017","text":"Re: Microfunc con id: 50ae41011d41c86ad8000004"},{"id":"50b4f8231d41c811fb000024","text":"Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4fa921d41c811fb000028","text":"Re: Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4fee41d41c811fb000034","text":"Re: Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4ff291d41c811fb000036","text":"Pedido con id: 50b4f6041d41c811fb000018"},{"id":"50b4ffd71d41c811fb00003a","text":"mira os poneis deacuerdo o que"},{"id":"50b5013d1d41c811fb00004b","text":"Re: Microfunc con id: 50ae41011d41c86ad8000004"},{"id":"50b51ccb1d41c811fb000061","text":"mensaje enviado desde el panel de administraci\u00f3n"},{"id":"50b51e0c1d41c811fb000063","text":"Re: mensaje enviado desde el panel de administraci\u00f3n"},{"id":"50b51e461d41c811fb000065","text":"Microfunc con id: 50ae3b321d41c849c500000b"},{"id":"50b51e611d41c811fb000068","text":"Re: Microfunc con id: 50ae3b321d41c849c500000b"},{"id":"50b61b831d41c80b5d000004","text":"Re: mira os poneis deacuerdo o que"},{"id":"50b897a41d41c83613000034","text":"Microfunc con id: 50ae3b321d41c849c500000b"}]},"total":18}

I want to get the results sorted by the search and use infinite scroll feature, but it is not working properly.

What am I doing wrong?

Answer 1

The sorting needs to be done server side, not on the client since the client doesn’t have access to all elements at load time. From your code it appears that text is equivalent to your Message subject. If so, you can simply modify this line:

@messages = Message.where(:by_the_system => nil).
  page(params[:page]).per(params[:page_limit])

to include a sort order:

@messages = Message.where(:by_the_system => nil).
  order(:subject).
  page(params[:page]).per(params[:page_limit])

Your response should include the current page, and whether this is the last page:

respond_to do |format| 
 format.json { 
  render :json => {
    :results => results,
    :total => @messages.count,
    :page => params[:page].to_i,
    :last_page => @messages.last_page
 } 
}

You also need to modify your ajax request to update the page variable instead of an unused ‘more’ offset:

results: function (data, page) {
          page = data.page + 1;
          if (data.last_page == data.page){ 
            // do something to disable searching as list is now exhausted
          }
          return {results: data.results};
        }