Javascript 如何创建HTML搜索函数以缩小表中的结果？

我们正在尝试创建一个搜索功能，当用户开始键入名称时，下表中显示的结果将被缩短，即该表最初包含的名称为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>

---

您需要使用datatables来实现此功能

将您的表与下面的代码集成

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

---

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

请提供一些代码。目前，我们没有大量代码将每个名称显示在单独的一行中，或者全部显示在一行中？对表格进行详细说明。@MikeyBarker，然后向我们展示您尝试的较少代码通过“查看页面”选项将SocialiadChief.com中的css和js文件保存在您的本地文件夹中，因为如果该网站的服务器关闭，您的表格将无法工作。