JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <script>
      var filter = _.debounce(function(searchElem) {
        console.log("searching for:", searchElem.value)
        
        $.ajax("https://jsonplaceholder.typicode.com/users", {//ajax request
          data: {
            name_like: searchElem.value
          },
          dataType: "json"
        }).done(function(data) {//When it finishes create and append the rows in the result area
          var rows = data.map(function(elem) {
            return $("<div class=\"row\"><a><h3>" + elem.name + "</h3><h4>" + elem.username + "</h4><p>" + elem.email + "</p></a></div>")
          })

          $(".result").empty().append(rows);
        });


      }, 500);//Perform ajax request only if 500 ms passed after the last keyup.
      
      //Initial rendering
      $(document).ready(filter);

    </script>
    <div id="search-area">
      <input type="text" class="searchInput" id="txtSearch" placeholder="Search for names.." onkeyup="filter(this)" />
    </div>
    <div class="result"></div>
  </body>
</html>