JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui search">
  <input class="prompt" type="text" placeholder="Search...">
  <div class="results"></div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.ui.search')
     .search({
         type: 'category',
         /*selector: {
             prompt: '.input-search',
             results: '.results-search'
         },*/
         minCharacters: 1,
         source: {
             "results": {
                 "category1": {
                     "name": "Category 1",
                     "results": [
                         {
                             "title": "Doe",
                             "description": "Optional Description"
                         }, 
                         {
                             "title": "John",
                             "description": "Optional Description"
                         }
                     ]
                 },
                 "category2": {
                     "name": "Category 2",
                     "results": [
                     	{
                         	"title": "John Doe",
                            "description": "Optional Description"
                     	}
                     ]
                 }
             }
         }
     });