JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="search-field">
		<input name="search" placeholder="Search.." class="search-input" />
		<span class="cancel-icon"></span>
		<div class="search-module">
			<div id="search-content"></div>
		</div>
	</div>

CSS

body {
	width: 100%;
	height: 100%;

	background-color: #B4CDCD;
}

.search-field {
	position: relative;
	z-index: 2;
}

.search-field:focus {
	width: 100%;
	background-color: #fff;
}

.search-input {
	position: relative;
	width: 330px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: white;
	background-image: url('assets/icon/searchicon.png');
	background-position: right 10px center;
	background-repeat: no-repeat;
	padding: 12px 40px 12px 12px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
}

.search-input:focus {
	position: relative;
	width: 60%;
	background-color: #fff;
	outline: none !important;
	z-index: 901;
	border: 1px solid #30a161;
}

.cancel-icon {
	position: absolute;
	display: none;
	top: 0;
	margin: 8px 0;
	padding: 3px 15px;
	color: var(--theme-color);
	font-weight: bold;
	cursor: pointer;
	z-index: 1024;
}

.cancel-icon:after {
	content: '\2716';
}

.search-module {
	position: relative;
}

.search-input:focus + .cancel-icon {
	display: inline;
}

.search-input ~ .search-module {
	position: fixed;
	background-color: transparent;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 900;
	pointer-events: none;
	transition: background-color .5s ease-in-out;
}

.search-input:focus ~ .search-module {
	pointer-events: auto;
	background-color: #fff;
}

#search-content {
	position: fixed !important;
	top: 60px;
	left: 10px;
	z-index: 1025;
}

JavaScript

var data = [
    {
        "id": 198,
        "name": "Test",
   },
    {
        "id": 345,
        "name": "Test 3",
   },
    {
        "id": 545,
        "name": "Test 3",
   },
    {
        "id": 678,
        "name": "Test 4",
   }
    ,
    {
        "id": 678,
        "name": "Test",
   }

    ,
    {
        "id": 678,
        "name": "Test2",
   }
]

output = "";
$.each(data, function (key, val) {
    output += "<div class='values'>";
    output += '<h5 class="value-id">' + val.id + '</h5>';
    output += '<p class="value-name">' + val.name + '</p>'
    output += "</div>";
});

$('#search-content').html(output);
if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
    $('#search-content').hide();
}

$(function () {
    var $rows = $('.values');
    $('.search-input').keyup(function () {
        $('#search-content').show();
        var regex = new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i')
        $rows.hide().filter(function () {
            var text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
            return regex.test(text)
        }).show();

    });
});

$(".cancel-icon").on("click", function(){
	console.log('test')
});