Rails mongoid solr grouping remote ajax data in Select2: Optgroup appearing multiple times when I search for a child

Question

I'm using Select2 with Rails and Mongoid and I have Sunspot Solr on the server side to do the searching. What I'm trying is to filter the data from mongo by solr, get that data by ajax request and group the results according to parent-child hierarchy. What I can't figure out is when I search for a child and if there are multiple child results, the parent category is occuring multiple times. Please read below for more info:

Here is my data in Mongo DB

{ "_id" : ObjectId("5209eb465a721ae827c661de"), "title" : "Bina Kanalizasyon Tesisatı", "parent" : "Su Tesisatçılığı", "path" : "sutesitati/kanalizasyon" }

{ "_id" : ObjectId("5209eb465a721ae827c661df"), "title" : "Daire Temiz Su Tesisatı", "parent" : "Su Tesisatçılığı", "path" : "sutesisati/temizsu" }

{ "_id" : ObjectId("5209eb465a721ae827c661e0"), "title" : "Musluk Tamiri", "parent" : "Su Tesisatçılığı", "path" : "sutesitati/musluktamiri" }

Here is my Rails Model

class Category
  include Mongoid::Document
  include Sunspot::Mongoid2

  searchable do
    text :title 
  end

  field :title, :as => :title_textp
  field :parent
  field :path  
end

Here is my Rails Controller

class CategoriesController < ApplicationController
  respond_to :html, :json

  def list_styles 
      search = Category.search do
        fulltext params[:q]
      end
      search = Category.search { keywords params[:q]; paginate :page => params[:page], :per_page => params[:page_limit] }
      @results = search.results
      @total_lines = search.total
      @categories = @results    
     respond_with @categories 
  end 

end

Here is my Haml View

 = f.label :category
 = f.hidden_field :category, class: 'input-block', placeholder: "Lütfen almak istediğiniz hizmet türünü seçiniz"

And Here is my Javascript that I'm trying to figure out

$('#itinerary_category').select2({
    minimumInputLength: 3,
     ajax: {
      url: "/categories/list_styles",
      dataType: 'json',
      quietMillis: 100,
      data: function (term, page) { 
        return {
            q: term, 
            page_limit: 10, 
            page: page, 
        };
      },
    results: function (data) {
      var results = [];
      $.each(data, function(index, item){
        results.push({
          text: item.parent,
          children: [{id: item._id, text:item.title}]
        });
      });
      return {
          results: results
      };
    } 
    }
}); 

When I run the server and make a search its working ok for group with one item

However When I make a search that displays multiple items the group name("Su Tesisatı") is displayed twice too.

I don't want the group name to be displayed twice and I can't figure out how to make the change. I want a list like

Su Tesisatçılığı
  Daire Temiz Su Tesisatı
  Bina Kanalizasyon Tesisatı

I'm not good at js and could not figure out how to solve it. Could anyone please help me? I think the example I've provided also adds up to discussion about Grouping remote data in select2 and clarly states how to use select2 with rails+mongoid+solr+ajax. If anyone could clear this then this will make select2 more powerful because there is almost no clear example on the web for making it work in grouping with ajax remote data. Any help would be greatly appreciated.

Answer 1

in this code you are creating a parent item per child:

  $.each(data, function(index, item){
    results.push({
      text: item.parent,
      children: [{id: item._id, text:item.title}]
    });
  });

instead, you should group by parent:

  var hashtable={};
  var results=[];
  $.each(data, function(index, item){
     if (hashtable[item.parent]===undefined) {
         hashtable[item.parent]={text:item.parent, children:[]};
         results.push(hashtable[item.parent]);
     }
     hashtable[item.parent].children.push({id:item._id,text:item.title});
  });