Javascript 如何在搜索栏上隐藏结果表？_Javascript_Php_Jquery_Mysql_Html

Javascript 如何在搜索栏上隐藏结果表？

javascript php jquery mysql html

Javascript 如何在搜索栏上隐藏结果表？,javascript,php,jquery,mysql,html,Javascript,Php,Jquery,Mysql,Html,我不是很擅长编码，我需要一个帮助我的代码。我有一个在数据库中搜索的代码。现在它显示数据库中的所有数据，当有人搜索时，它会过滤掉并在同一个表上显示结果。我只想显示结果，当有人在搜索栏上搜索时，它应该显示过滤后的数据。否则，我的表应该被隐藏谁能告诉我怎么做。非常感谢您抽出时间 <?php if(isset($_POST['search'])) { $valueToSearch = $_POST['valueToSearch']; // se

我不是很擅长编码，我需要一个帮助我的代码。我有一个在数据库中搜索的代码。现在它显示数据库中的所有数据，当有人搜索时，它会过滤掉并在同一个表上显示结果。我只想显示结果，当有人在搜索栏上搜索时，它应该显示过滤后的数据。否则，我的表应该被隐藏

谁能告诉我怎么做。非常感谢您抽出时间

  <?php
    if(isset($_POST['search']))
    {
        $valueToSearch = $_POST['valueToSearch'];
        // search in all table columns
        // using concat mysql function
        $query = "SELECT * FROM `ADDRESS` WHERE CONCAT(`ID`, `STATE`) LIKE '%".$valueToSearch."%'";
        $search_result = filterTable($query);

    }
     else {
        $query = "SELECT * FROM `ADDRESS`";
        $search_result = filterTable($query);
    }

    // function to connect and execute the query
    function filterTable($query)
    {
        $connect = mysqli_connect("localhost:3306", "root", "dbadmin", "simplymac");
        $filter_Result = mysqli_query($connect, $query);
        return $filter_Result;
    }

     ?>


    <!DOCTYPE html>
    <html>
        <head>
            <title>SimplyMac PO Tracking Tool</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
           <style>

            </style>
        </head>
        <body>
          <div class="images-wrapper">

        <img class="Large" src="/dbadmin/Images/simplymac_logo.png" width="320" height="140" />
          </div>
            <form action="index.php" method="post">
              <div class="wrap">
                <center><h3>PO TRACKING TOOL</h3></center>
                <center><table>
                  <tr>
                    <td><input type="text" name="valueToSearch" placeholder="Enter Purchase Order (PO#) Number" size="100" class="searchbar"></td>
                    <td><input type="submit" name="search" value="SEARCH" class="Button"></td>
                  </tr>
                </table></center>
              </div>
               <table class="resultdata">
                   <tr>
                        <th>ID</th>
                        <th>ADDRESS_LINE_1</th>
                        <th>ADDRESS_LINE_2</th>
                        <th>CITY</th>
                        <th>STATE</th>
                        <th>ZIP</th>
                    </tr>
                    <?php while($row = mysqli_fetch_array($search_result)):?>
                    <tr>
                        <td><?php echo $row['ID'];?></td>
                        <td><?php echo $row['ADDRESS_LINE_1'];?></td>
                        <td><?php echo $row['ADDRESS_LINE_2'];?></td>
                        <td><?php echo $row['CITY'];?></td>
                        <td><?php echo $row['STATE'];?></td>
                        <td><?php echo $row['ZIP'];?></td>

                    </tr>
                    <?php endwhile;?>
                </table>
            </form>

        </body>
    </html>

您可以使用ajax解决您的问题。当客户当时在文本框中键入调用一个java脚本函数时，在该函数中获取文本框值并调用结果表的ajax

函数getResult（搜索）
{
var file_path=''；//您的php文件路径
$.ajax({
类型：“POST”，
url:文件路径，
数据：搜索，
cache:false，
成功：功能（结果）{
//在一个div中打印结果
}
});
}

您了解PHP吗？删除查询的其他部分，使其不显示所有数据，否则您的编码很好我知道您是用PHP编写的，但您了解ajax了吗？如果你这样做，每次搜索时都必须重新加载页面。@Chris，不幸的是，我没有，但我肯定会去寻找它。感谢与我分享。@MuhammadMuazzam，我已经删除了其他部分，它第一次起作用，但在您第一次搜索后，它将再次显示所有数据。如果我做错了，请原谅我。我对ajax不是很熟悉。我完全按照你告诉我的方式做了。它将消失数据库结果，但在我搜索和提交时不会返回结果。请看下面我的代码。非常感谢您的时间和帮助。我真的很感激。

function getResult（search）{var file_path='/dbadmin/index.php'.//您的php文件路径$.ajax（{type:“POST”，url:“index.php”，data:search，cache:false，success:function（result）{PO Number供应商SKU描述序列号数量。

//在一个div中打印结果}）}