JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css">
<div class="ui secondary menu">
    <div class="left menu">
        <div id="welcomeMessage" class="item">Broken Example</div>
    </div>
    <div class="right menu" id="search">
        <div class="ui search">
            <div class="ui icon input">
                <input type="text" class="prompt" autocomplete="off"><i class="circular search icon"></i>

            </div>
            <div class="results"></div>
        </div>
    </div>
</div>
    
<div class="ui secondary menu">
    <div class="left menu">
        <div id="welcomeMessage" class="item">Example with work around</div>
    </div>
    <div class="right menu" id="search2">
        <div class="ui search">
            <div class="ui icon input">
                <input type="text" class="prompt" autocomplete="off"><i class="circular search icon"></i>

            </div>
            <div class="results"></div>
        </div>
    </div>
</div>
    
<div class="right menu" id="search3">
    <div class="ui search">
        <div class="ui icon input">
            <input type="text" class="prompt" autocomplete="off"><i class="circular search icon"></i>

        </div>
        <div class="results"></div>
    </div>
</div>

CSS

#search2 .search .result{
	/* Hack to get around search results not showing when in menu for some reason */
	font-size: 16px !important;
	overflow: visible;
}

JavaScript

var searchOptions = {
    apiSettings: {
        url: '/echo/json/',
        method: 'post',
        data: {
            json: JSON.stringify({
                results: [{
                    title: 'Andorra'
                }, {
                    title: 'United Arab Emirates'
                }, {
                    title: 'Afghanistan'
                }]
            })
        }
    },
    minCharacters: 2,
    cache: false
};

$('#search').search(searchOptions);
$('#search2').search(searchOptions);
$('#search3').search(searchOptions);