<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.min.css">
    <script src="https://semantic-ui.com/dist/semantic.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="ui container">
      <h2 class="ui header">Local category search</h2>
      Type in 'result'
      <div class="ui segment">
        <div id="searchInput" class="ui category search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search categories...">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>          
      </div>
    </div>
  </body>      
</html>
// Add your javascript here

var searchItems = [
    {
      name: "Category 1",
      results: [
        {
          title: "result Title",
          description: "Optional Description"
        },
        {
          title: "result Title",
          description: "Optional Description"
        }
      ]
    },
    {
      name: "Category 2",
      results: [
        {
          title: "result Title",
          description: "Optional Description"
        }
      ]
    }
];

$(function(){

  $('#searchInput').search({
    apiSettings: {
        'response': function (e) {
            var searchTerm = e.urlData.query;

            var result = searchItems.map(function (cat) { 
              
                var items = cat.results.filter(function (item) {
                  return item.title.toLowerCase().includes(searchTerm.toLowerCase());
                });

                if(items !== null)
                {
                    var category = {'name' : cat.name};
                    category.results = items;
                    return category;
                }
            });    

            return {'results' : result };
        }
    },
    type: 'category'
  });
});
/* Put your css in here */

h1 {
  color: red;
}