如何创建 HTML 搜索功能以缩小表格中的结果？

Question

我们正在尝试创建一个搜索功能，当用户开始输入姓名时，下表中显示的结果会缩短，即该表最初包含姓名 Bob、Carl、Harry、Paul、Harriet。用户开始输入 B，下表仅显示 Bob（而不是其他四个名字）。如果用户键入 Harr，则 Harry 和 Harriet 都会显示在下表中。

但是，为了增加功能，如果用户输入的是 Hary（而不是 Harry），下表仍将显示 Harry（因为假定这是拼写的内容）。

任何帮助将不胜感激。

<?

$sql = "SELECT name, region FROM jos_users ORDER BY id DESC LIMIT 6";

$rsd = mysql_query($sql, $dbconn);
while($rs = mysql_fetch_array($rsd)) {
    $name = $rs['name'];        
    $region = $rs['region'];        


     ?>

            <tr>
                <td><?php 
                echo $name; 
                ?></td>
                <td><?php 
                echo $region; 
                ?></td>
            </tr>
            <?php
} 
?>              

        </table>

Answer 1

您需要为此功能使用数据表

将您的表格与以下代码集成

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://socialleadchief.com/src/js/dataTables.bootstrap.js"></script>
    <script src="http://socialleadchief.com/src/js/jquery.dataTables.js"></script>
    <script src="http://socialleadchief.com/src/css/dataTables.bootstrap.css"></script>
    <script src="http://socialleadchief.com/src/css/tooltip.css"></script>

    <script type="text/javascript">
        $(function() {
            $("#example1").dataTable();
            $('#example2').dataTable({
                //"bJQueryUI": true,
                "bPaginate": true,
                "bLengthChange": false,
                // "bScrollCollapse": true,
                "bFilter": false,
                "bSort": true,
                "bInfo": true,
                "bAutoWidth": false
            });
        });
    </script>

<table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>    
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
        </tr>
    </tbody>
</table>

它还会为您提供排序功能。