javascript - 如何隐藏搜索栏上的结果表?

标签 javascript php jquery mysql html

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

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

  <?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获取结果表。

function getResult(search)
{
	var file_path = '';//your php file path
	$.ajax({
		type: "POST",
		url: file_path,
		data: search,
		cache: false,
		success: function(result){
			//print result in one div
		}
	});
}
 <input type="submit" name="search" value="SEARCH" class="Button" onClick="getResult(this.value);">

关于javascript - 如何隐藏搜索栏上的结果表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44876317/

相关文章:

javascript - 添加新的滚动内容(克隆)到 jQuery UI slider ?

javascript - 是否可以 overflow hidden 但仍允许滚动?

javascript - 使用 md-virtual-repeat 动态加载字体

javascript - 如何使用node js下载并保存多个文件?

javascript - !!(new Number(0)) == true,但是 !!(Number(0)) == false,为什么?

javascript - Angular4 提示 HTML 中的中心元素是未定义的函数

php - 我需要帮助将 Mysql 查询对象转换为字符串

php - 在 PHP 和 MySQL 中仅将特定行从一个表复制到另一个表

php - localhost wordpress 重定向到 XAMPP 站点

javascript - jQuery Flexslider 无法在 iPhone 和 iPad 上工作