Javascript 如何使用“搜索”按钮按<；p>；名称

我有一个图像库，每个图像都有标题，还有一个带有搜索按钮的输入字段。当我单击搜索按钮时，我希望显示包含特定字符的图像，隐藏其余字符，当输入字段为空时，再次显示所有图像

比如，如果我输入“c”，所有标题为“TitleCat”的图片都会被留下，其余的则隐藏起来。 如果我输入“title”，所有图像都应该仍然显示

<button id="search" onclick="sortImage()" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"> 
    </input>SEARCH
</button>

<div id="Images">
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
</div>

搜索
标题

标题日志

标题

标题日志

我需要创建一个函数

sortImage（）

，但我不知道如何创建

---

接近它。

在输入更改时，启动一个查看每个p的函数，并在不包含搜索值的p的每个父级上应用一个类“hide”，类似于

---

决定是否进行搜索CI。

首先，您必须将

id=“img”

更改为

class=“img”

，因为id应该是唯一的。我使用contain来过滤结果，但如果您想不区分大小写，则应使用

indexOf

函数排序（）{
var myfilter=$（“#inputValue”）.val（）；
$（“.img p:not（：contains（“+myfilter+”））.hide（）；
$（“.img p:contains（“+myfilter+”）.show（）；
}

搜索
标题

标题日志

标题

标题日志

使用纯js

function sortImage() {
  var p_tags = document.getElementsByTagName("p"); //Get All p Elements
  var searchText = document.getElementById('inputValue').value; //Get written in input
  if (searchText != "") {
    for (var i = 0; i < p_tags.length; i++) { //Loop to check every p content with input value
       if (p_tags[i].textContent != searchText) { //if p content not equal input value
          p_tags[i].parentElement.style.display = "none"; //Hide Parent
         }
      }
  }

函数排序（）{
var p_tags=document.getElementsByTagName（“p”）；//获取所有p元素
var searchText=document.getElementById（'inputValue'）.value；//在输入中写入
如果（searchText！=“”）{
对于（var i=0；i

}

只需在html代码中进行简单的编辑

<input type="text" id="inputValue" placeholder="Type to search">
<button id="search" onclick="sortImage()" type="button">
   SEARCH
</button>

搜索

一个如何使用数据属性进行筛选搜索的小示例，您可以在p标记中创建全文，筛选仍然有效

Html部分：

<input type="text" id="inputValue" placeholder="Type to search"></input>
<button id="search" class="filter-button" type="button">
    SEARCH
</button>

<div id="galory">
    <div id="img" data-filter="TitleCat">
        <img src"....">
        <p>TitleCat</p>
    </div>
    <div id="img" data-filter="TitleDog">
        <img src"....">
        <p>TitleDog</p>
    </div>
    <div id="img" data-filter="TitleCat">
        <img src"....">
        <p>TitleCat</p>
    </div>
    <div id="img" data-filter="TitleDog">
        <img src"....">
        <p>TitleDog</p>
    </div>
</div>

搜索
标题

标题日志

标题

标题日志

Jquery部分：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function () {
        $(".filter-button").click(function () {
            var value = $('#inputValue').val();
            $('#galory')
                .children()
                .filter(function () {
                    return $(this).data('filter') != value;
                })
                .hide();
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.filter按钮”）。单击（函数（）{
var值=$（'#inputValue'）.val（）；
$（“#galory”）
.儿童（）
.filter（函数（）{
返回$（this）.data（'filter'）！=值；
})
.hide（）；
});
});

首先，属性在文档中必须是唯一的，您可以使用它

您可以按以下方式尝试使用

：not（）

和

：contains（）

：

函数排序（）{
$（'.img'）.show（）；//全部显示
var v=$（'#inputValue'）.val（）.trim（）.toUpperCase（）；
$（'.img>p:not（：contains（'+v+'）））。最近（'.img'）。hide（）；//隐藏那些不包含值的
}

搜索
标题

标题日志

标题

标题日志

不区分大小写的搜索

$（文档）。在（'click'，'#search'，函数（e）{
var myfilter=$（“#inputValue”）.val（）.toLowerCase（）；
$（“.img p”）.hide（）；
//不区分大小写
$（'.img p'）。每个（函数（i）{
if（$（this）.text（）.toLowerCase（）.indexOf（myfilter）！=-1）{
$（this.show（）；
}       
});
});

搜索
标题

标题日志

标题

标题日志

很高兴您能让它工作：）我刚刚删除了
onclick
事件，因为我认为jQuery会更灵活
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function () {
        $(".filter-button").click(function () {
            var value = $('#inputValue').val();
            $('#galory')
                .children()
                .filter(function () {
                    return $(this).data('filter') != value;
                })
                .hide();
        });
    });
</script>