Swiftype Autocomplete JQuery Seperate Results by document type

359 Views Asked by At

Greetings I am using the Swiftype gem for rails swiftype.com I have got it working in that I can upload documents to their site, and autocomplete on mine.

The issue I am having is that I am searching over two different document types and want this to be displayed in the results as such.

I have two types of document: Category and Company

current I have this being displayed:

Search:
  Category
  Category
  Company
  Category
  Company

Where I want it to be like this

Search:
  Category
  Category
  Category
  ---------
  Company
  Company

Or even better like this:

Search:
  Category    |  Company
  Category    |  Company
  Category    |  Company

I am using the default Swiftype autocomplete JS.

And the JS on the page looks like this:

$(function() {
          var customResultRenderFunction = function(ctx, data) {
            var withSections = [],
              noSections = [];

            $.each(data, function(docType, results) {
              $.each(results, function(idx, result) {
                if (result.sections && result.sections.length > 15) {
                  withSections.push(result);
                } else {
                  noSections.push(result);
                }
              });
            });

            var withSectionsList = $('<ul class="with_sections"></ul>'),
              noSectionsList = $('<ul class="no_sections"></ul>');

            $.each(withSections, function(idx, item) {
              ctx.registerResult($('<li class="result"><p>' + item['name'] + '</p></li>').appendTo(withSectionsList), item);
            });
            $.each(noSections, function(idx, item) {
              ctx.registerResult($('<li class="result"><p>' + item['name'] + '</p></li>').appendTo(noSectionsList), item);
            });
            if (withSections.length > 0) {
              withSectionsList.appendTo(ctx.list);
            }
            if (noSections.length > 0) {
              noSectionsList.appendTo(ctx.list);
            }
          };

          $('#st-search-input').swiftype({
            engineKey:  '<%= ENV['SWIFTYPE_ENGINE_KEY'] %>',
            resultRenderFunction: customResultRenderFunction,
            suggestionListType: 'div',
            resultListSelector: '.result',
            fetchFields: {page: ['url', 'name']}
          });
        });

</script>

How can I display this better, to seperate the document types?

0

There are 0 best solutions below