JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.2/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.2/semantic.min.css">
<div id="search" class="ui search">
    Name:
    <div class="ui icon input">
        <input class="prompt" placeholder="Name" type="text" id="name" />
        <i class="circular search icon"></i>
    </div>
    
    <div class="results"></div>
</div>

<div id="search2" class="ui search">
    Name:
    <div class="ui icon input">
        <input class="prompt" placeholder="Name" type="text" id="name" />
        <i class="circular search icon"></i>
    </div>
    
    <div class="results"></div>
</div>

JavaScript

$('#search').search({
   apiSettings: {
       url: '/echo/json/',
       method: 'post',
       data: {
           json: JSON.stringify({
               results: [
                   { title: 'Andorra' },
                   { title: 'United Arab Emirates' },
                   { title: 'Afghanistan' }
               ]}
           )
       }
   },
    onSelect: function(result, response) {
        console.log(result.title);
    },
    minCharacters: 0
});

$('#search2').search({
    source: [
        { title: 'Andorra' },
        { title: 'United Arab Emirates' },
        { title: 'Afghanistan' }
    ],
    onSelect: function(result, response) {
        alert(result ? result.title : 'null');
    },
    minCharacters: 0
});