JSFiddle - React, Tailwind, and code Playground

by elclanrs

HTML

<div class="tabcontent participants">
    <div class="search_container">
        <input id="participants-field" type="text" name="search" placeholder="Search participants" autocomplete="off"/>
    </div>
    <div class="single_participant">
        <p class="name">Fire Penguin Disco Panda</p>
    </div>
    <div class="single_participant">
        <p class="name">Nacho Libre</p>
    </div>
    <div class="single_participant">
        <p class="name">Batman Bin Superman</p>
    </div>
</div>

CSS

body {
    font: normal 16px Arial;
}

.highlight {
    background: red;
    color: white;
}

JavaScript

var $search = $('#participants-field');
var $names = $('.single_participant p');

$search.keyup(function(){
  var match = RegExp(this.value, 'gi');
  $names
    .hide()
    .filter(function(){ return match.test($(this).text()) })
    .show()
    .html(function(){
      if (!$search.val()) return $(this).text();
      return $(this).text().replace(match, '<span class="highlight">$&</span>');
    });
});