Search Modules: Create html element inside search result

Previously I used type category for my search… I want to inject a simply html to the result such as image below, what I should be do here…

$.fn.api.settings.api = {
  'search': '/api/search/json/?q={query}'
};

$('.ui.search.quick-search').search({
  type          : 'category',
  minCharacters : 1,
  apiSettings   : {
    action: 'search',
    onResultsAdd: function(html) {
      // i can't inject here..
    },
    onResponse: function(searchApiResponse) {
      var response = {
        results : {}
      };
      // translate `searchApiResponse` response to work with search
      var numbThreads = 0, numbUsers = 0;
      $.each(searchApiResponse.items, function(index, item) {
        var
          model = item.model || 'Unknown',
          maxResults = 8,
          maxItems = maxResults/2
        ;
        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) {
            response.results[model].results.push({
              title: item.title,
              description: item.description,
              url: item.url
            });
          }
          numbThreads++;
        }else if (item.model === 'Users') {
          if (numbUsers < maxItems) {
            response.results[model].results.push({
              title: item.username,
              description: item.username,
              url: item.profile_url,
              image: item.gravatar_url,
              price: item.total_threads
            });
          }
          numbUsers++;
        }
      });

      selector = $(document).find('.ui.search.quick-search');
      injector = '<div class="ui divider"></div>'+
                 '<button class="ui red button">'+
                    'Show more options...'+
                 '</button>';
      selector.find('.results').append(injector);
      
      console.log(response); // return Object such as image below..
      return response;
    }
  }
});// EOF

I also has a problem to marked results by query. For example:

• Query = text marked as bold
• Results:
  1. Collaboratively extend fully tested networks for 2.0
  2. Proactively text marked as bold customer directed solutions via multidisciplinary.
  3. Continually lorem ipsum matrix excellent communities vis-a-vis team driven

[agusmakmun]

finally… people suggested me to handle this problem at the backend, and of course using regex. I never think it before can be works with perfectly… 😸

http://stackoverflow.com/questions/41985525/semantic-ui-search-api-how-i-can-highlight-certain-characters-that-match-the#comment71148868_41985525

I think on item.description you should replace with a regex and wrap it with usually I do it from the backend, but in this case this is the only way I think. – peterpeterson.

currently I doing this case with django, and here is my backend script…

import re

def highlight_query(query, text):
    """
    return injected html element
    to the `text` that matched by query.
    """
    return re.sub(r'(%s)+' % query,
        '<span class="marked-text">%s</span>' % query, text)

Thank you so much @Cyb3rWarri0r8 and peterpeterson

[awgv]

Closing as requested.