JSFiddle - React, Tailwind, and code Playground

by revzephyr

HTML

<input type="text" id="search-dinosaurs" placeholder="Search for Dinosaurs (start typing)" />
 
<ul id="dino-list">
  <li>Diplodocus</li>
  <li>Stegosaurus</li>
  <li>Triceratops</li>
  <li>Pteradactyl</li>
  <li>Tyrannosaurus Rex</li>
  <li>Protoceratops</li>
  <li>Iguanadon</li>
  <li>Velociraptor</li>
</ul>

CSS

input[type=text]{
  width:200px;
  padding:8px 10px;
}

li em {
  background:#ff6;
    font-style:normal;
}

JavaScript

$(document).ready(function () {
 

    /* highlight matches text */
    var highlight = function (string) {
        $("#dino-list li.match").each(function () {
            var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");
            var matchEnd = matchStart + string.length - 1;
            var beforeMatch = $(this).text().slice(0, matchStart);
            var matchText = $(this).text().slice(matchStart, matchEnd + 1);
            var afterMatch = $(this).text().slice(matchEnd + 1);
            $(this).html(beforeMatch + "<em>" + matchText + "</em>" + afterMatch);
            console.log(matchStart, matchEnd, beforeMatch, matchText, afterMatch);
        });
    };
 
 
    /* filter products */
    $("#search-dinosaurs").on("keyup click input", function () {
        if (this.value.length > 0) {
            $("#dino-list li").removeClass("match").hide().filter(function () {
                return $(this).text().toLowerCase().indexOf($("#search-dinosaurs").val().toLowerCase()) != -1;
            }).addClass("match").show();
            highlight(this.value);
            $("#dino-list").show();
        }
        else {
            $("#dino-list, #dino-list li").removeClass("match").hide();
        }
    });
    });