JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input"  onfocus="this.value = '';" value="Start Searching" style="text-transform:lowercase;" />
		</div>
		<span class="input"></span>
		<hr/>
		<ul class="filter">
            <li data-label="lowercase">lowercase</li>
            <li data-label="UPPERCASE">UPPERCASE</li>
		</ul>

CSS

body{font-family:Arial; font-size:12px; padding:0 20px; margin:0;}
hr{
	border-top:1px dotted #aaa;
	border-bottom:none;
	margin:20px 0;}
input[type=text]#input{
	width:100%;	
	line-height:24px;
	border:none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	outline:none;
	}
.search{
	background:url('../images/search.png') 5px no-repeat;
	margin-top:20px;
	border:1px solid #eee;	
	padding:5px 5px 5px 45px;
	}
.input{display:block; padding-top:20px;}
ul.filter{list-style:none;}
.filter{margin:0; padding:0;}
.filter li{display:block; background:#f2f2f2; padding:5px; margin:0 5px 5px 0; float:left;}

JavaScript

$.noConflict();
			jQuery(document).ready(function($) {
				$('#input').on( "keyup", function() {
					// get the value from text field
					var input = $(this).val();
                    
					var total = $("ul li");
var matched = $("ul li").filter(function() { return $(this).data('label').toLowerCase().indexOf(input.toLowerCase()) >= 0; });
                    
                    total.hide();
                    matched.show();
                    
                    if(input.length > 0){
						$('.input').show();
						$('.input').html('Searched for "' + input + '" (' + matched.length + ' Matched out of ' + total.length + ' )');
					} else {
						$('.input').hide();}
				});
			});