Html 过滤器<；部门>；与<；输入类型="；复选框“&燃气轮机；可扩展和<；标签>&书信电报；p>；文本内容_Html_Search_Filter

Html 过滤器<；部门>；与<；输入类型="；复选框“&燃气轮机；可扩展和<；标签>&书信电报；p>；文本内容

html search filter

Html 过滤器<；部门>；与<；输入类型="；复选框“&燃气轮机；可扩展和<；标签>&书信电报；p>；文本内容,html,search,filter,Html,Search,Filter,我一直在试图找到一种方法，通过div>label>和p>中的文本内容过滤掉我的可扩展div。我将把我的例子放在下面。我已经尝试了前面问题中的几个jquery示例，但我似乎无法让它工作。构建div的方法是通过单击适用的标签>，展开p>内容。我想有一个搜索框，将过滤掉div的，不包含在搜索框中列出的文本 <html> <head> </head> <body> <style> div { position: relative; } inpu

我一直在试图找到一种方法，通过div>label>和p>中的文本内容过滤掉我的可扩展div。我将把我的例子放在下面。我已经尝试了前面问题中的几个jquery示例，但我似乎无法让它工作。构建div的方法是通过单击适用的标签>，展开p>内容。我想有一个搜索框，将过滤掉div的，不包含在搜索框中列出的文本

<html>
<head>
</head>
<body>
<style>
div {
position: relative;
}
input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
h3 {
font-size: large;
font-weight: 400;
color: #4a19ff;
margin: 20px 0 10px 0;
}
label {
cursor: pointer;
position: relative;
display: block;
padding-left: 20px;
font-family: 'Helvetica', 'Arial';
color: gray;
}
label:before {
display: none;
content: "";
position: absolute;
width: 0;
height: 0;
top: 40%;
left: 10px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -8px;
}
input[type=checkbox]:checked ~ h2 label:before {
border-left: 8px solid transparent;
border-top: 8px solid black;
border-right: 8px solid transparent;
margin-left: -4px;
margin-top: -4px
}
input[type=checkbox]:checked ~ h3 ~ p {
max-height: 80%;
color: white;
}
</style>


<center>
<input type="text" id="example" placeholder="Search example..">
</center>
<div class="code">
<input type="checkbox" id="1">
    <h3>
        <label for="1">1 Expandables</label>
    </h3>
        <p class="content">
        This is an example of the expandables.
    </p>
</input>
</div>
<div class="code">
<input type="checkbox" id="2">
    <h3>
        <label for="2">2 Test</label>
    </h3>
        <p class="content">
        Can I do this?
        </p>
</input>
</div>
<div class="code">
<input type="checkbox" id="3">
    <h3>
        <label for="3">3 Apology</label>
    </h3>
        <p class="content">
        I am a noob at this and apologize if this is a basic request.          
    </p>
</input>
</div>
</body>
</html>


div{
位置：相对位置；
}
输入[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：0；
}
h3{
字体大小：大号；
字体大小：400；
颜色：#4a19ff；
利润率：20px 0 10px 0；
}
标签{
光标：指针；
位置：相对位置；
显示：块；
左侧填充：20px；
字体系列：“Helvetica”、“Arial”；
颜色：灰色；
}
标签：之前{
显示：无；
内容：“；
位置：绝对位置；
宽度：0；
身高：0；
最高：40%；
左：10px；
左边框：8px纯黑；
边框顶部：8px实心透明；
边框底部：8px实心透明；
利润上限：-8px；
}
输入[类型=复选框]：选中~h2标签：之前{
左边框：8px实心透明；
边框顶部：8px纯黑；
右边框：8px实心透明；
左边距：-4px；
利润上限：-4px
}
输入[类型=复选框]：选中~h3~p{
最高高度：80%；
颜色：白色；
}
1可扩展的

这是一个可扩展的示例。

2试验

我能做这个吗？

3道歉

我对此不屑一顾，如果这是一个基本要求，我道歉。

此脚本将从id为且name=“search”的textfield中获取值，然后将迭代文档正文中的所有div元素，如果这些div元素中的任何一个不包含输入搜索框的字符串，则将其显示样式设置为“无”

如果要从文档中完全删除div，可以将

this.style.display=“none”

行更改为

document.body.removeChild（此）


标题
搜寻
函数btnSearchOnClick（）{
var searchTxt=document.getElementById（“search”）.value；//从搜索输入字段获取值
如果（searchTxt！=“”）{//如果在搜索字段中有输入
$（“div”）.each（function（）{//遍历第页上的每个div
var index=this.innerHTML.indexOf（searchTxt）；
如果（索引==-1）{
this.style.display=“无”；
}
});
}
}
第0课
第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课

编辑：这是您要求的新代码

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
<body>
<input type="text" name="searchbox" id="searchbox" />
<div id="div0">div0</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>

<script type="text/javascript">

$("#searchbox").on("input", function(){
    var searchboxText = $("#searchbox").val();
    if(searchboxText != ""){
        $("div").each(function(){
           var divText = $(this).text();
           var index = divText.indexOf(searchboxText);
           if(index == -1){
               $(this).css("display", "none");
           }
           else{
               $(this).css("display", "block");
           }
        });
    }
    else{
        $("div").each(function(){
            $(this).css("display", "block");
        });
    }
});

</script>
</body>
</html>


标题
第0课
第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课
$（“#搜索框”）。在（“输入”，函数（）上{
var searchboxText=$（“#searchbox”）.val（）；
如果（searchboxText！=“”）{
$（“div”）。每个（函数（）{
var divText=$（this.text（）；
var index=divText.indexOf（searchboxText）；
如果（索引==-1）{
$（this.css（“显示”、“无”）；
}
否则{
$（this.css（“显示”、“块”）；
}
});
}
否则{
$（“div”）。每个（函数（）{
$（this.css（“显示”、“块”）；
});
}
});

谢谢。我会试一试。我尝试了提供的脚本，它隐藏了所有div，如果我搜索其中包含的文本，它们将不会出现。我想知道是否有一种方法可以让页面上的所有div都可见，然后在我将文本输入到div中不存在的搜索框时开始隐藏这些div。我将使用适合我的新代码编辑帖子。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
<body>
<input type="text" name="searchbox" id="searchbox" />
<div id="div0">div0</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>

<script type="text/javascript">

$("#searchbox").on("input", function(){
    var searchboxText = $("#searchbox").val();
    if(searchboxText != ""){
        $("div").each(function(){
           var divText = $(this).text();
           var index = divText.indexOf(searchboxText);
           if(index == -1){
               $(this).css("display", "none");
           }
           else{
               $(this).css("display", "block");
           }
        });
    }
    else{
        $("div").each(function(){
            $(this).css("display", "block");
        });
    }
});

</script>
</body>
</html>