页内结果实时搜索 [英] In-Page Result Live Search

问题描述

我需要一个搜索框，该搜索框会像CTRL + F的工作原理一样引发结果. 现在，在我的index.php页面上，我使用ff格式:

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>

我已经尝试过许多JQuery和Ajax教程，但是似乎没有一个值能很好地工作.因此，我得出的结论是，也许只有当您为表行设置了预定义的值时，这些教程才可以工作.例如:

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>

无论如何，我可以在索引页上搜索表行时进行CTRL + F一样的搜索吗?

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

推荐答案

JavaScript(尤其是与jQuery结合使用)非常容易学习和理解.无需插件或教程.

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

如何搜索表格?

这是我刚刚为您写的jsfiddle:

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>";
        });
    });
});

当您输入新的搜索关键字时，我没有添加重设突出显示的匹配项的权限，这取决于您:-)提示:添加类似t.removeClass(c);

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

这篇关于页内结果实时搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！