隐藏内容DIV并在按下搜索按钮后显示它

Hide content DIV and show it after pressing the search button

本文关键字：按钮 搜索 显示 DIV 隐藏      更新时间：2023-09-26

我想做一个像谷歌一样的页面搜索。该页将包含以下内容:

  1. 文本框
  2. 搜索按钮

在文本框中输入值并按下按钮后，结果应该放在DIV中，但在按下搜索按钮之前，这将不可见。只有按下搜索按钮后才会显示内容。

基本上，您使用CSS隐藏div，当点击搜索按钮时，它显示如下:

CSS代码
#content_div {
   display: none;
}
jQuery 

$(".search_button").click(function() {
    $("#content_div").show();
}

使用jQuery的ajax()函数来实现这一点。查看此链接:http://www.codeforest.net/simple-search-with-php-jquery-and-mysql

看起来你可能想使用这样的东西:

 $('#search_results').load('perform_search.php', {query: $('#search_query_input').val()});

解释:

  1. #search_results是div，您将在其中放置您的结果
  2. load()是jquery通过ajax更新容器的函数
  3. perform_search.php是将返回结果显示在#search_results
    4. 中的页面。
  4. query是传递给perform_search(如5)的参数名称。$ _REQUEST[‘查询’])
  5. #search_query_input是你的"文本框"的id

谢谢，希望能有所帮助

相关文章：