jQuery Search replacement of default search for Gravity Forms Directory, located https://wordpress.org/support/plugin/gravity-forms-addons/

index.php

<?php
  /* This is just an example of code to place inside of your wordpress page when using Gravity Forms Directory
     I also included some screenshots to show you.
     This uses jQuery and javascript to search the table <td> elements with the attribute 'Business Name' <- Change this to yours
  */
?>

[button type="big"] Submit Your Business[/button]

<form>
<input type="text" id="tableSorterInput" placeholder="Search here...">
</form>

[directory form="1"]

<script>

       jQuery(document).ready(function ($) {
           $('#lead_form').remove();
           $('table tr:last')
              .after('<tr class="notfound" role="row"><td colspan="3"><p>We are sorry, we can\'t seem to find that.</p></td</tr>');
           $("#tableSorterInput").keyup(function () {
               var value = this.value.toLowerCase().trim();
               var rows = $("table tr.items").length;
               $("table tr.items").each(function (index) {

               var not_found;
               let thisrow = $(this);

                   $(this).find("td").each(function () {
                       

                       if ( $(this).attr('title') == 'Business Name' ) {

                           var idx = $(this).text().toLowerCase().trim();
                           not_found = (idx.indexOf(value) == -1);
                           if (not_found) {rows--;}
                           thisrow.toggle(!not_found);

                       }

                   });

   });

       console.log('rows '+rows);
       if (rows <= 0) {
       $(".notfound").show();
       console.log("---"); }

   else {
       if ($(".notfound").hasClass("notfound"))
       console.log("+++++");
       $(".notfound").hide();}

});

       });

   </script>
     
   <style>
     #tableSorterInput {
          background-image: url(images/searchicon.png);
          background-position: 10px 12px;
          background-repeat: no-repeat;
          width: 100%;
          font-size: 16px;
          padding: 12px 20px 12px 40px;
          border: 1px solid #ddd;
          margin-bottom: 12px;
      }
    </style>

 <?php
      /*
        Screenshots
        1 – https://www.dropbox.com/s/3kkwaptp0q4eyaj/1.png?dl=0
        2 – https://www.dropbox.com/s/ifo0ry73wl0jqvw/2.png?dl=0
        3 – https://www.dropbox.com/s/cfi1lbhegeu21ub/3.png?dl=0
        
        Search Icon image
        https://www.dropbox.com/s/12l2o3wn7id4ta1/searchicon.png?dl=0
      */