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>

它也会给你排序功能。

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

1 个答案: