使用JQuery通过搜索框隐藏div
的方法如下：
- 首先，确保你已经引入了JQuery库。可以通过以下方式在HTML文件中引入JQuery：
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>- 在HTML文件中，创建一个搜索框和一个需要隐藏的div：
<input type="text" id="searchBox" placeholder="输入关键词">
<div id="contentDiv">
这是需要隐藏的内容
</div>- 使用JQuery编写脚本来实现搜索框隐藏div的功能：
$(document).ready(function() {
// 监听搜索框的输入事件
$("#searchBox").on("input", function() {
var keyword = $(this).val(); // 获取搜索框的值
if (keyword === "") {
$("#contentDiv").show(); // 如果搜索框为空，则显示div
} else {
$("#contentDiv").hide(); // 如果搜索框有值，则隐藏div
}
});
});在上述代码中，我们使用了JQuery的on方法来监听搜索框的输入事件。当搜索框的值发生变化时，我们获取搜索框的值，并根据其是否为空来决定是否隐藏div。如果搜索框为空，则显示div；如果搜索框有值，则隐藏div。
这种方法可以用于实现搜索框联动隐藏某个div的效果。例如，在一个网页中有多个div，根据用户输入的关键词，可以动态隐藏不符合条件的div，从而实现搜索功能。
推荐的腾讯云相关产品：无
希望以上信息对您有所帮助！
相关·内容
我的jQuery知识有限，我试着在论坛上搜索我的问题的答案，但我找不到任何建议的解决方案，而且我缺乏经验，使我无法看到我的问题发生在哪里。我有一个包含一些平铺卡片的页面，每个卡片都包含更多的div和其他文本元素。我希望能够在搜索框中搜索任何可能在这些卡片中的任何位置的文本字符串，并隐藏其他不存在的卡片。到目前为止，我已经设法让它工作了，所以我的搜索查询是不区分大小写的，当它找到匹配时，它会隐藏卡中的其他所有内容。 我觉得我已经很接近了
浏览 25提问于2020-01-06得票数 1
回答已采纳
现在，当我搜索某些内容时，它通过php提供来自mysql数据库的输出，并使用jquery以html格式输出，非常简单。
现在我的问题是，在这些中，哪一种是最好的方法，您可以提出自己的方法，？生成一个div #searchbox，将其放入body和onkeyup()中，从php中取出data并输出到#searhbox，并使用jQuery将#searchbox放置在.autocomp下面，并隐藏我不想使用jQuery插件
浏览 2提问于2014-05-16得票数 0
我在我的许多网站上使用jquery，我担心任何隐藏的div中将用于对话框的内容都不是搜索引擎友好的，我想知道是否：
是google?搜索/索引隐藏的div中的内容。在网页上使用jQuery UI对话框/选项卡或其他隐藏元素的最佳实践是什么？(以确保SEO的最佳结果)
浏览 2提问于2010-11-04得票数 14
回答已采纳
3回答
我已经实现了一个充当过滤器的搜索框。当用户在搜索区域中单击时，将显示一个下拉框，其中显示所有可能的选项。在搜索框中键入可过滤结果。在框外单击将隐藏结果。它使用以下HTML/CSS层次结构 <input type="text" name="search" value="se
浏览 17提问于2012-05-17得票数 7
回答已采纳
没有数据库后端，有没有可能以某种方式在html / css页面上创建一个搜索框，可能使用jquery无所不包，也就是说我在页面上有四个div框，每个div框都包含特定的风格文本或关键字。有没有可能做一个搜索框，当搜索一个关键字时，它会隐藏其他不包含该关键字的div框，然后只显示那些包含该关键字的div框</em
浏览 0提问于2012-09-13得票数 0
回答已采纳
我有一个带有搜索建议的搜索框：<div id="searchSuggestion"></div>
当输入时，div searchSuggestion会通过jQuery ajax自动更新(代码未显示)。要隐藏/显示自动完成建议(显示在搜索文本框下面)，我使
浏览 45提问于2017-01-18得票数 1
回答已采纳
4回答
我使用下面的代码隐藏并显示一组搜索结果上的框。每个结果都有自己的按钮和框来显示和隐藏。我遇到的问题是，单击任何一个切换按钮都会显示和隐藏页面上的所有框，而不仅仅是一个结果的框。我该怎么做？谢谢
浏览 0提问于2010-08-25得票数 2
回答已采纳
我使用jquery显示和隐藏搜索页面的部分。我有一个基于表单输入显示和隐藏的Html.Textbox和Html.CheckboxListFor (当表单提交时，如果文本框中没有输入任何内容，它将显示/隐藏textbox，复选框部分也会显示/隐藏)我还使用jquery .click函数根据需要显示/隐藏这些搜索选项。SelectedKeywords {
浏览 1提问于2013-09-07得票数 0
回答已采纳
1回答
当用户关注输入时，如何推荐文本？
、、、、
我在我的页面中有一个搜索框，当用户关注我的搜索框输入时，我想推荐我的页面的某些部分来写一些东西。
<input type="text" placeholder="Search...
浏览 0提问于2021-09-16得票数 0
回答已采纳
6回答
在按钮单击时隐藏div
、、、
当用户输入完数据并单击“提交”时，我希望该框消失。(返回到正常的屏幕查看) <textarea id="BlankBoxSubmitComment" type="button" value="Submit"
onclick="Submit
浏览 0提问于2013-03-21得票数 2
1回答
上面有一个搜索框，现在我想当我在搜索框中搜索特定的id时，所有显示的记录都应该被隐藏，只有特定的id记录应该显示在我正在搜索的屏幕上。我试图使用jquery隐藏div，但只隐藏了1条记录，但我想隐藏所有旧的记录 <?>Student Name</div>";
echo "&l
浏览 13提问于2019-09-03得票数 1
我正在制作一个有5个列表的页面，可以通过1个jQuery搜索框进行过滤。我有过滤器正常工作，但我希望能够隐藏标题标签，如果所有的列表元素是隐藏的过滤器。HTML<input class="search" type="text" placeholder="Type here to search..." />
<
浏览 2提问于2017-05-02得票数 0
3回答
我想做一个像谷歌这样的网页搜索。这一页将包含以下内容：在文本框中输入一个值并按下按钮后，结果应该放在DIV中，但在按下搜索按钮之前这是不可见的。内容只能在按下搜索按钮后显示。如何通过使用jQuery来实现这一点。
浏览 3提问于2011-12-17得票数 0
1回答
我有一个导航，您可以通过它过滤div框： <li><a href="javascript:void(0);" data-target="apples">Appels</a></li>pineapples apples"></div>
我的目标是:当你点击一个水果，那些在他们的类中不包含水果的div盒隐藏-但是:他们不
浏览 2提问于2014-04-05得票数 0
我正在使用带有搜索工具栏的jqGrid。现在，对于一些列，我不需要搜索字段，因为我不想让它们可搜索(即一列复选框)。对于这些列，我想隐藏搜索工具栏中的搜索字段。选项的部分： {name:'checkbox', index:'checkbox', width:'3%', viewable:false},jQu
浏览 6提问于2011-01-05得票数 8
回答已采纳
3回答
基于搜索显示元素
、、、、
我希望.box元素根据用户搜索的单词来显示/隐藏，例如，如果用户输入'Title2 Title1‘，因为这些单词存在于第一个和第二个框中，它们将保持可见，但重命名的.box元素将隐藏。.box元素中的所有文本都需要是可搜索的，而不仅仅是.title元素中的文本。 下面是我已经走了多远。它几乎就在那里，但它并不完全像预期的那样工作。 任何帮助都是最好的。 非常感谢。</div>
<div class="con
浏览 26提问于2020-04-21得票数 1
回答已采纳
3回答
我对jquery很陌生。我正在写一个脚本来隐藏div“方框”和所有的孩子。当用户滚动到页面底部时，div“方框”和所有子框都会显示。当我隐藏“盒子”时，它只会移除那个div。$(document).ready(function() {});
很抱歉我缺少代码，但是我很难理解这一课，而且我也找不到一个确切的例子来说明我试图通过我的网络搜索来做什么
浏览 6提问于2016-04-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
