JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<p>Suchfilter für Downloads</p>
<input type="text" id="search-criteria" placeholder="Suchbegriff" />
<input type="button" id="search" value="suchen" />
<input type="button" id="clear" value="zurücksetzen" />

<div class="ce_downloads first last block">
<h3>Arbeitshilfen</h3>
<ul>
<li class="download-element ext-pdf">
<a href="de/arbeitshilfen.html?file=files/intern/Einladungen/2022-10-10_Einladung_Aufsichtsratssitzung.pdf" title="Die Datei 2022-10-10_Einladung_Aufsichtsratssitzung.pdf herunterladen">Einladung Aufsichtsratssitzung am 10.10.2022 <span class="size">(31,6 KiB)</span></a>
</li>
<li class="download-element ext-pdf">
<a href="de/arbeitshilfen.html?file=files/intern/Einladungen/2021-10-10_Einladung_Aufsichtsratssitzung.pdf" title="Die Datei 2021-10-10_Einladung_Aufsichtsratssitzung.pdf herunterladen">Einladung Aufsichtsratssitzung am 10.10.2021 <span class="size">(31,6 KiB)</span></a>
</li>
<li class="download-element ext-pdf">
<a href="de/arbeitshilfen.html?file=files/intern/Einladungen/2020-10-10_Einladung_Aufsichtsratssitzung.pdf" title="Die Datei 2020-10-10_Einladung_Aufsichtsratssitzung.pdf herunterladen">Einladung Aufsichtsratssitzung am 10.10.2020 <span class="size">(31,6 KiB)</span></a>
</li>
</ul>
</div>

<div class="ce_downloads first last block">
<h3>Sitzungsunterlagen</h3>
<ul>
<li class="download-element ext-pdf">
<a href="de/arbeitshilfen.html?file=files/intern/Einladungen/2022-10-10_Einladung_Aufsichtsratssitzung.pdf" title="Die Datei 2022-10-10_Einladung_Aufsichtsratssitzung.pdf herunterladen">Einladung Sitzung am 10.10.2022 <span class="size">(31,6 KiB)</span></a>
</li>
<li class="download-element ext-pdf">
<a href="de/arbeitshilfen.html?file=files/intern/Einladungen/2021-10-10_Einladung_Aufsichtsratssitzung.pdf" title="Die Datei 2021-10-10_Einladung_Aufsichtsratssitzung.pdf herunterladen">Einladung Sitzung am 10.10.2021 <span class="size">(31,6 KiB)</span></a>
</li>
<li class="download-element ext-pdf">
<a...

JavaScript

//$('.download-element').hide();
$('#search').click(function() {
  $('.download-element').hide();
  var txt = $('#search-criteria').val();
  var count = 0;
  $('.download-element').each(function() {
    if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
      $(this).show();
      $(".ce_downloads ul p").detach();
      count++;
      console.log(count);
    }
    else
    {
    	
      if(count == 0 && !$(".ce_downloads ul p").length){
      	$(".ce_downloads ul").append("<p class='info'>Kein Ergebnis für diese Suchanfrage.</p>");
      }
    }
  });
});
$('#clear').click(function() {
	$('#search-criteria').val("");
  $('#search').click(); //Trigger search button click event
});
$('#search-criteria').keypress(function(e) {
  //Enter == 13
  if (e.which == 13) {
    $('#search').click(); //Trigger search button click event
  }
});