JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<form action="#">
		<fieldset>
			<input type="text" name="search" value="" id="id_search" placeholder="Search" autofocus />
		</fieldset>
	</form>

    <article class="kategorie-uebersicht">
    <h2>Kategorie 1</h2>
	    <ul>
	    	<li class="kategorie-uebersicht"><a href="#">Test 01</a></li>
			<li class="kategorie-uebersicht"><a href="#">Test 02</a></li>
			<li class="kategorie-uebersicht"><a href="#">Test 03</a></li>
			<li class="kategorie-uebersicht"><a href="#">Test 04</a></li>
			<li class="kategorie-uebersicht"><a href="#">Test 05</a></li>
	    </ul>
    </article>
    
    <article class="kategorie-uebersicht">
    <h2>Kategorie 2</h2>
	    <ul>
	    	<li class="kategorie-uebersicht"><a href="#">Kat - Test 01</a></li>
			<li class="kategorie-uebersicht"><a href="#">Kat - Test 02</a></li>
			<li class="kategorie-uebersicht"><a href="#">Kat - Test 03</a></li>
			<li class="kategorie-uebersicht"><a href="#">Kat - Test 04</a></li>
			<li class="kategorie-uebersicht"><a href="#">Kat - Test 05</a></li>
	    </ul>
    </article>
    
    <article class="kategorie-uebersicht">
    <h2>Kategorie 3</h2>
	    <ul>
	    	<li class="kategorie-uebersicht"><a href="#">H - Test 01</a></li>
			<li class="kategorie-uebersicht"><a href="#">H - H - Test 02</a></li>
			<li class="kategorie-uebersicht"><a href="#">H - Test 03</a></li>
			<li class="kategorie-uebersicht"><a href="#">H - Test 04</a></li>
			<li class="kategorie-uebersicht"><a href="#">H - Test 05</a></li>
	    </ul>
    </article>
    
    <article class="kategorie-uebersicht">
    <h2>Kategorie 4</h2>
	    <ul>
	    	<li class="kategorie-uebersicht"><a href="#">Test - Test 01</a></li>
			<li class="kategorie-uebersicht"><a href="#">Berlin - 02</a></li>
			<li class="kategorie-uebersicht"><a href="#">MĂĽnchen - 03</a></li>
			<li class="kategorie-uebersicht"><a href="#">Dsseldorf - 04</a></li>
			<li class="kategorie-uebersicht"><a...

JavaScript

(function($, window, document, undefined) {
	$.fn.quicksearch = function (target, opt) {
		
		var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({ 
			delay: 100,
			selector: null,
			stripeRows: null,
			loader: null,
			noResults: '',
			matchedResultsCount: 0,
			bind: 'keyup',
			onBefore: function () { 
				return;
			},
			onAfter: function () { 
				return;
			},
			show: function () {
				this.style.display = "";
			},
			hide: function () {
				this.style.display = "none";
			},
			prepareQuery: function (val) {
				return val.toLowerCase().split(' ');
			},
			testQuery: function (query, txt, _row) {
				for (var i = 0; i < query.length; i += 1) {
					if (txt.indexOf(query[i]) === -1) {
						return false;
					}
				}
				return true;
			}
		}, opt);
		
		this.go = function () {
			
			var i = 0,
				numMatchedRows = 0,
				noresults = true, 
				query = options.prepareQuery(val),
				val_empty = (val.replace(' ', '').length === 0);
			
			for (var i = 0, len = rowcache.length; i < len; i++) {
				if (val_empty || options.testQuery(query, cache[i], rowcache[i])) {
					options.show.apply(rowcache[i]);
					noresults = false;
					numMatchedRows++;
				} else {
					options.hide.apply(rowcache[i]);
				}
			}
			
			if (noresults) {
				this.results(false);
			} else {
				this.results(true);
				this.stripe();
			}
			
			this.matchedResultsCount = numMatchedRows;
			this.loader(false);
			options.onAfter();
			
			return this;
		};
		
		/*
		 * External API so that users can perform search programatically. 
		 * */
		this.search = function (submittedVal) {
			val = submittedVal;
			e.trigger();
		};
		
		/*
		 * External API to get the number of matched results as seen in 
		 * https://github.com/ruiz107/quicksearch/commit/f78dc440b42d95ce9caed1d087174dd4359982d6
		 * */
		this.currentMatchedResults = function() {
			return this.matchedResultsCount;
		};
		
		this.stripe = function () {
			
			if (typeof...