JSFiddle - React, Tailwind, and code Playground

by Aman0js

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
    <div class="row fd-srch-bar-home-page">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
            <input type="text" class="form-control fd-srch-home-page-area" placeholder="Search Area" autocomplete="off"/>
            
            <div class="area-sugg-list">
                <ul>
                </ul>
            </div>
        </div>
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
            <input type="text" class="form-control fd-srch-home-page-dine-type" placeholder="Search Dine Types" autocomplete="off"/>
        </div>
        <div class="col-xs-2 col-md-2 col-sm-2 col-lg-2">
            <input type="submit" class="btn fd-srch-home-page-sbt-btn" value="Search"/>
         </div>
    </div>
    <div class="body-below-form row">
        
    </div>
</body>

CSS

.fd-srch-bar-home-page {
    height: 5em;
}

.fd-srch-bar-home-page div {
    position: relative;
}

.fd-srch-bar-home-page .fd-srch-home-page-area {
    border: none;
    border-bottom: 2px solid rgb(100, 79, 193);
    border-radius: 0;
    display:inline-block;
    position: relative;
}

.fd-srch-bar-home-page .fd-srch-home-page-dine-type {
    border: none;
    border-bottom: 2px solid rgb(100, 79, 193);
    border-radius: 0;
    display:inline-block;
    position: relative;
    left:-1em;
}

.fd-srch-bar-home-page .fd-srch-home-page-sbt-btn {
    background-color: transparent;
    border: 2px ridge;
    border-radius: 0;
    color: rgb(100, 79, 193);
    display:inline-block;
    font-family: menu;
    position: relative;
    left:-2em;
}

.area-sugg-list ul li {
    list-style-type: none;
}

.body-below-form {
    background-color: rgb(100, 79, 193);
    height:10em;
}
}

JavaScript

$('body').on('input', '.fd-srch-home-page-area', function () {
    var area = $('.fd-srch-home-page-area').val();
    if(area != '')
    {
        var array = new Array('abcd', 'aftr', 'sdff', 'styy', 'trere', 'bref'); /* This is just for demo, it will actually created by ajax call */
        var innerHtml = '';
        var areaReg = new RegExp(area);
        for(var i = 0; i<array.length; i++)
        {
            if(areaReg.test(array[i]))
            {
                innerHtml += '<li>'+array[i]+'</li>';
            }
        }
        $('.area-sugg-list ul').html(innerHtml);
    }
    else {
        $('.area-sugg-list ul').html('');
    }
});