JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search-project" name="search-project">
<ul class="list-porject">
    <li>AAA - AAA</li>
    <li>BBB - BBB</li>
    <li>0546 - Testing</li>
    <li>TOF0042 - text update + resize</li>
</ul>

CSS

.hidden {display:none;}

JavaScript

(function($){
    $(document).ready(function() {
        $("#search-project").keyup(function(){
			
			// Retrieve the input field text and reset the count to zero
			var filter = $(this).val();

			// Loop through the comment list
			$(".list-porject li").each(function(){
				
				// If the list item does not contain the text phrase fade it out
				if ($(this).text().search(new RegExp(filter, "i")) < 0) {
					$(this).addClass('hidden');
				// Show the list item if the phrase matches and increase the count by 1
				} else {
					$(this).removeClass('hidden');
					
				}
			});

		
		});
    })
})(jQuery)