In-Page Result Live Search

Question

I need a search box that would throw a result just like how the CTRL+F works. Right now, on my index.php page I have the ff format:

<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>

I've already tried many JQuery and Ajax tutorials but none of them seems to work fine with a value. So I just got into conclusion that perhaps those tutorials could only work only if you have a pre-defined value for the table rows. Like this one for example:

<th>ClientName</th>

Anyway I can have a CTRL+F like search on my index page for the table rows?

[Deprecated features in PHP 5.5](http://php.net/manual/en/migration55.deprecated.php) — Daniel W., Aug 05 '14 at 08:00
@DanFromGermany I see, but if I started to use mysqli would I be able to create a livesearch? — Archangel08, Aug 05 '14 at 08:11

Daniel W. · Answer 1 · 2014-08-05T08:16:42.987

1

Javascript, especially in combination with jQuery is very easy to learn and understand. No need for plugins or tutorials.

How to search the table?

Here is a jsfiddle I just wrote for you:

http://jsfiddle.net/j9U52/

$('#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>";
        });
    });
});

I did not add to reset the highlighted matches when you enter a new search keyword, I leave this up to you :-) Hint: Add something like t.removeClass(c);

edited Aug 05 '14 at 08:16

answered Aug 05 '14 at 08:11

Daniel W.

31,164
13
93
151

thanks. this was a great help. But, what am also trying to do is this [**DEMO**](http://jsfiddle.net/FranWahl/rFGWZ/) You know when you typed a certain client's name the page will going to display the results. Like for example, I typed the name "Dan", the moment I typed letter D, just like the CTRL+F it will be highlighted just like what you've shown but a query will also run so the clients name that is equal to D will show on the same page with no refresh. Just as like that demo. Though I tried it before, it doesn't seem to work and I dunno why. – Archangel08 Aug 05 '14 at 08:40
@Archangel08 I can't provide a better example than the one you already have linked. It's rather simple: If string is not within the `tr`, simply `.hide()` the row. – Daniel W. Aug 05 '14 at 08:42
@Archangel08 Javascript is very versatile, you can attach event listeners on differen events, like not only click but also on change, on key press, on mouse over,... play arround with it to see whats possible. – Daniel W. Aug 05 '14 at 08:51
hmmm... I've tried various script to get the result that I wanted. But until none... none of it seems to work. And when I tried the DEMO [exactly as it was given on that link, as in no edit where done] on a page I uploaded on the webhost, this too didn't work. I think there's something fishy with I dunno, my web hosting perhaps? – Archangel08 Aug 06 '14 at 06:23
Do you include jQuery ? And did you wrap your js in $(document).ready(function() { }); ? – Daniel W. Aug 06 '14 at 07:29
yes I did. I'm still doing a debug. I think it has something to do with the other codes in index.php – Archangel08 Aug 06 '14 at 08:30
Do I made it all wrong? – Archangel08 Aug 07 '14 at 06:16
Finally, I did it! ^_^ hooray! But the only thing left here is, it only works for number. I can't understand why it doesn't work for letters the way it suppose to? – Archangel08 Aug 07 '14 at 07:49
@Archangel08 you should ask a new question with your new code and a new jsfiddle. Im sure you will get a good answer very fast! – Daniel W. Aug 07 '14 at 07:56

In-Page Result Live Search

1 Answers1

Linked