Semantic UI Realtime Search

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<div class="ui inverted menu">
  <a class="item"><i class="home icon"></i> Home</a>
  <div class="left menu">
    <div class="item">
      <div class="ui search transparent inverted icon input quick-search">
        <i class="search icon"></i>
        <input class="prompt input-quick-search" type="text" name="q" placeholder="Search">
      </div>
    </div>
  </div>
</div>
<div class="ui segment">
  <i class="info circle icon"></i> See this gist for more detail about result: <a href="https://gist.github.com/agusmakmun/e258a3243367105c32919c083eb577fe" target="_blank"><code>result.json</code></a>
</div>

CSS

body {
  margin: 1em
}

JavaScript

$(document).ready(function() {
  $.fn.api.settings.api = {
    'search': 'https://gist.githubusercontent.com/agusmakmun/e258a3243367105c32919c083eb577fe/raw/8b0038b0141f5813c03baece0b2730e17216f8c9/result-data.json?q={query}'
  };

  $('.ui.search.quick-search').search({
    type          : 'category',
    minCharacters : 1, // just under devel to make it easy
    apiSettings   : {
      action: 'search',
      onResponse: function(searchApiResponse) {
        var response = {
          results : {},
          action  : searchApiResponse.action // dict action
        };
        // translate `searchApiResponse` response to work with search
        var numbThreads = 0, numbUsers = 0;
        $.each(searchApiResponse.items, function(index, item) {
          var
            model = item.model || 'Unknown',
            maxResults = 6,
            maxItems = maxResults/2 // max results per-Category
          ;
          if(index >= maxResults) {
            return false;
          }
          // create new model category
          if(response.results[model] === undefined) {
            response.results[model] = {
              name    : model,
              results : []
            };
          }
          if(item.model === 'Threads') {
            if ((numbThreads < maxItems) || (numbUsers < numbThreads)) {
              response.results[model].results.push({
                title: item.title,
                description: item.description,
                url: item.url
              });
            }
            numbThreads++;
          }else if (item.model === 'Users') {
            if ((numbUsers < maxItems) || (numbThreads < numbUsers)) {
              response.results[model].results.push({
                title: item.username,
                description: item.username,
                url: item.profile_url,
                image: item.gravatar_url,
                price: item.total_threads
              });
            }
            numbUsers++;
          }
     ...