JSFiddle - React, Tailwind, and code Playground

HTML

<main>
	<input style="margin-bottom:1em ;" placeholder="検索">
  <ul>
	<li class="item hide" data-type="田中花子">田中花子</li>
	<li class="item hide" data-type="高橋花子">高橋花子</li>
	<li class="item hide" data-type="佐藤花子">佐藤花子</li>
	<li class="item hide" data-type="田中太郎">田中太郎</li>
	<li class="item hide" data-type="高橋太郎">高橋太郎</li>
	<li class="item hide" data-type="佐藤太郎">佐藤太郎</li>
  <li class="item hide" data-type="田中たけし">田中たけし</li>
	<li class="item hide" data-type="高橋たけし">高橋たけし</li>
	<li class="item hide" data-type="佐藤たけし">佐藤たけし</li>
  </ul>

JavaScript

var jSearch = (function (){
	// Item List
	var input = $('input');
	var items = $('.item');
	
	// Search Listener
	input.keyup(function() {
		// Performance Monitor
		var t0 = performance.now();
		var input = $(this).val();
		
		switch(true){	
			case input === '':
				items.css('opacity', '1');
				break;
			default:
				items.css('opacity', '0.2');
				items.filter('[data-type*="' + input.toLowerCase() + '"]').css('opacity', '1');			
				break;
		}
		// Performance Monitor
		var t1 = performance.now();
		console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
	});
})();