Refactored Search JS

search.js

$('#search').keyup($.throttle(function() {
  // Will only execute 300ms after the last keypress.
  if ($('#search').val().length > 0) {
    sendSearchAjaxRequest();
  } else {
    $('.search_dropdown').hide()
  }
}, 300));


function sendSearchAjaxRequest() {
  $.ajax({
    type: 'GET',
    url: '/search',
    data: {
      query: $('#search').val()
    },
    dataType: 'json',
    success: function(response){
      $('.search_dropdown').find('.spinner').hide();

      new SearchService(response).render();
    }
  });
}

search_service.js

function SearchService(response) {
  this.response = response;
  this.container = $('.search_dropdown').find('.results');
}

SearchService.prototype = {
  constructor: SearchService,

  render: function() {
    this.anyResults() ? this.showResults() : this.noResults();
  },

  anyResults: function() {
    this.response.count > 0 // count of records returns from backend
  },

  noResults: function()  {
    var $span = $("<span>").text('No results found');
    $("<div>").addClass("title").append($span).appendTo(this.container);
  },

  showResults: function() {
    var self = this;

    $.each(this.response, function (key, collection) { // each key of json
      if (collection.length > 0) {
        this.addTitle(key); // css class make first letter uppercase

        $.each(collection, function(ignore, item) {
          $link = $("<a>").href(item.url).text(item.title); // generate the url & title on backend side
          $("<div>").addClass("content").append($link).appendTo(self.container);
        });
      }
    });
  },

  addTitle: function(title)  {
    var $span = $("<span>").text(title);
    $("<div>").addClass("title").append($span).appendTo(this.container);
  }
};