JSFiddle - React, Tailwind, and code Playground

by holdoffhunger

HTML

<input class="form-control search input-lg" id="search" style="text-transform: lowercase;" type="text">
<button onclick="setInputSeries(this);" data-series="pp">Filter pp</button>

<div id="list">
  <p class="fruit" data-name="apple">Apple</p>
  <p class="fruit" data-name="apple2">Apple2</p>
  <p class="fruit" data-name="aple">Aple</p>
  <p class="fruit" data-name="orange">Orange</p>
  <p class="fruit" data-name="banana">Banana</p>
  <p class="fruit" data-name="mango">Mango</p>
  <p class="fruit" data-name="lemon">Lemon</p>
  <p class="fruit" data-name="apple3">Apple3</p>
</div>

JavaScript

$(document).ready(function () {
	
	$('#search').on('keyup change', function () {
		this.value = this.value.toString().toLowerCase();
		if (this.value == "") {
			$('.fruit').show();
		} else {
			let elems = $('.fruit[data-name*="'+this.value+'"]');
			$('.fruit').not(elems).hide();
			elems.show();
		}
	});
	
});

function setInputSeries(elmnt) {
	document.getElementById("search").value = elmnt.dataset.series;
  document.getElementById("search").dispatchEvent(new Event('change'));
}