title: Semantic UI - Search API: how I can highlight certain characters that match the query?
body: <p>I have a problem when I want to <strong><em>highlight</em></strong> certain characters that match the query in <a href="http://semantic-ui.com/modules/search.html" rel="nofollow noreferrer">search module</a>.</p>
  
  <p>an example is like this forum: <a href="https://forums.meteor.com" rel="nofollow noreferrer">https://forums.meteor.com</a></p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/7134451/22277034/db14f0fa-e2ea-11e6-8ce7-679207b74ab7.png" alt="highlight"></p>
  
  <blockquote>
    <p>Previously, I already asked this issue at <a href="https://github.com/Semantic-Org/Semantic-UI/issues/4930#issuecomment-275011130" rel="nofollow noreferrer">https://github.com/Semantic-Org/Semantic-UI/issues/4930#issuecomment-275011130</a>, but until now not been resolved.</p>
  </blockquote>
  
  <p>here is my current demo: <a href="https://jsfiddle.net/agaust/5854gae9/4/" rel="nofollow noreferrer">https://jsfiddle.net/agaust/5854gae9/4/</a></p>
  
  <pre><code>$(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 &gt;= maxResults) {
              return false;
            }
            // create new model category
            if(response.results[model] === undefined) {
              response.results[model] = {
                name    : model,
                results : []
              };
            }
            if(item.model === 'Threads') {
              if ((numbThreads &lt; maxItems) || (numbUsers &lt; numbThreads)) {
                response.results[model].results.push({
                  title: item.title,
                  description: item.description,
                  url: item.url
                });
              }
              numbThreads++;
            }else if (item.model === 'Users') {
              if ((numbUsers &lt; maxItems) || (numbThreads &lt; 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++;
            }
          });
  
          // only showing the bottom action button if under limited
          if (searchApiResponse.limited_items) {
            response["action"] = searchApiResponse.action;
          }
          console.log(response);
          return response;
        }
      }
    });
  });
  </code></pre>
  
  <p>any help would be apreciated.. :)</p>