Поиск в реальном времени в реальном времени

Мне нужно окно поиска, которое выдаст результат так же, как работает CTRL + F. Прямо сейчас, на моей странице index.php у меня есть формат ff:

<table width="100%"> <thead> <tr> <th><strong>Client Name:</strong></th> <th><strong>Nationality:</strong></th> <th><strong>Birthday:</strong></th> <th><strong>Address:</strong></th> <th><strong>Gender:</strong></th> <th><strong>Birthplace:</strong></th> </tr> </thead> <?php $sql=mysql_query(" select * from tenant order by id asc"); $count=0; while($row=mysql_fetch_array($sql)) { $client_id = $row['id']; $clientName = $row['cname']; $cbday = $row['bday']; $cadd = $row['address']; $cgender = $row['gender']; $cbirth = $row['birthplace']; if($count%2) { ?> <tbody> <?php } else { ?> <tr id="<?php echo $id; ?>"> <?php } ?> <td> <span class="text"><?php echo $client_id.". ".$clientName; ?></span> </td> <td> <span class="text"><?php echo $cbday; ?></span> </td> <td> <span class="text"><?php echo $cadd; ?></span> </td> <td> <span class="text"><?php echo $cgender; ?></span> </td> <td> <span class="text"><?php echo $cbirth; ?></span> </td> </tr> </tbody> <?php $count++; }//while-end ?> </table> 

Я уже пробовал много учебников JQuery и Ajax, но ни один из них не работает отлично со значением. Поэтому я только пришел к выводу, что, возможно, эти учебники могут работать только в том случае, если у вас есть предварительно заданное значение для строк таблицы. Как это, например:

• Запрос HTTP OPTIONS на сайтах Azure не удается из-за CORS
• возвращающие переменные из файла AJAX / php
• Результат автозаполнения JQuery
• Как отправить значения массива флажков через Ajax с помощью jQuery?
• как получить результаты в реальном времени с помощью jquery?

 <th>ClientName</th> 

Во всяком случае, я могу иметь CTRL + F, например, поиск на моей индексной странице для строк таблицы?

 $('#search-submit').on('click', function(event) { var v = $('#search-value').val(); // get the search value var t = $('.searchable td'); // WHERE to search var c = 'highlight'; // css class to add to the found string // for each td in the table $.each(t, function(idx, el) { // find the keyword var regex = new RegExp("\\b" + v + "\\b", "gi"); // replace it and add a span with the highlight class el.innerHTML = el.innerHTML.replace(regex, function(matched) { return "<span class=\"" + c + "\">" + matched + "</span>"; }); }); });