如何使用 JQuery 在图库上设置搜索筛选器功能?它需要隐藏与实时密钥条目不匹配的结果

Question

>我正在创建一个带有搜索过滤器功能的图库。搜索过滤器应该过滤掉每个输入的键的显示缩略图。搜索基于存储在title标签中的img标题。例如，如果我键入"la"，则title中每个带有匹配文本的图像都应该出现，直到我输入"lake"。

我的脚本具有存储搜索词和图像标题的变量(不确定我是否正确(。然后，我添加了一个带有搜索词变量的函数。搜索词在我的日志中按键条目实时显示。

我添加了console.log($img === $searchTerm);以确保我的想法在正确的轨道上，并且搜索条目将返回 true，但它一直返回 false。这可能不是最理想/最有效的方法，但我的想法是，在操作 DOM 之前应该记录正确的结果。

我宁愿不使用插件，除了我已经使用的灯箱插件。我想了解如何添加搜索功能及其工作原理。

网页示例

<div class="gallery" id="gallery">
<div class="imageContainer" title="someText.">
<a href="photos/01.jpg" title="someText" alt="someIMG"class="images">
<img src="photos/thumbnails/01.jpg" alt="someIMG" class="thumbnails">
</a>
</div>
</div>

脚本示例

const $searchBar = $(`#searchForm > input`);
let $img = $(`.imageContainer > a[title]`);
$searchBar.on('keyup', function(event) {
const $searchTerm = event.target.value.toLowerCase();
const $imgList = $img.toArray();
console.log($searchTerm);
console.log($img === $searchTerm);
});

再次感谢您的任何输入！

Answer 1

这样的东西会起作用吗？

const $searchBar = $('#searchForm > input');
const $img = $('.imageContainer > a[title]');
$searchBar.on('keyup', function(event) {
var searchTerm = $(this).val().toLowerCase(); 
//I removed the $ as it is not a jQuery object, but it doesn't really matter
$img.show(); //show them all first
$img.each(function() { //no need for $imgList as it is already an array
var title = $(this).attr('title').toLowerCase(); 
if (!title.includes(searchTerm)) { //do you need to support IE? use indexOf if so
$(this).hide(); //hide if not a match
}
});
});

如果您需要支持 IE，这样的东西可以代替includes功能。

if (title.indexOf(searchTerm)) {
$(this).hide();
}

更新 2：

以下是更新的代码，用于处理仅输入空格而不是文本的人，以及IE修复程序：

const $searchBar = $('#searchForm > input');
const $img = $('.imageContainer > a[title]');
$searchBar.on('keyup', function(event) {
var searchTerm = $.trim($(this).val().toLowerCase()); //we trim this to remove whitespace
$img.show();
if (searchTerm) {
$img.each(function() { 
var title = $.trim($(this).attr('title').toLowerCase()); //and we trim this too
if (title.indexOf(searchTerm)) {
$(this).hide(); 
}
});
}
});

Answer 2

我们获取搜索输入值，然后将其与标题进行比较，然后隐藏与字母不匹配的内容(无需键入单词(title(的所有字母(：

document.getElementById('search').addEventListener('keyup', function(e) {
let term = e.target.value;
let term = e.target.value.toLowerCase();
if(term) {
toggleDisplay('none')    
let elements = document.getElementsByTagName('li');
for(let i=0; i<elements.length; i++){
if(elements[i].textContent.toLowerCase().includes(term)) {
elements[i].closest('.card').style.display = 'block';
}
}
}
else {
toggleDisplay('inline-block')
}
});
function toggleDisplay(display) {
let cards = document.querySelectorAll('.card');
for(let i=0; i< cards.length; i++){
cards[i].style.display = display;
}
}

.container {
margin: 0 auto;
}
@media (min-width: 576px) {.container {max-width: 540px;}}
@media (min-width: 768px) {.container {max-width: 760px;}}
@media (min-width: 992px) {.container {max-width: 960px;}}
@media (min-width: 1200px) {.container {max-width: 1190px;}}
.form-container {
text-align: center;
margin: 30px 0;
}
.search-input {
width: 250px;
height: 30px;
}
.card {
background-color: #ddd;
width: 30%;
margin: 0 1%;
height: 100px;
float: right;
overflow: hidden;
margin-bottom: 30px;
}
.card:hover .card-ul {
transform: translateX(0%);
}
.card-ul {
list-style: none;
display: flex;
justify-content: space-between;
transform: translateX(100%);
transition: transform 0.3s;
}
.card-li {
background-color: #fff;
padding: 3px 5px;
border-radius: 5px;
margin: 10px;
}

<div class="container">
<div class="form-container">
<form id="search-form">
<input type="text" id="search" class="search-input">
</form>
</div>
<div class="card-container">
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Black</li>
<li class="card-li yellow">Yellow</li>
<li class="card-li jwhite">White</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Red</li>
<li class="card-li yellow">Green</li>
<li class="card-li jwhite">White</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Denim</li>
<li class="card-li yellow">Amaranth</li>
<li class="card-li jwhite">Celadon</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Brown</li>
<li class="card-li yellow">Capri</li>
<li class="card-li jwhite">Camel</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Brown</li>
<li class="card-li yellow">Blond</li>
<li class="card-li jwhite">Blue</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Beaver</li>
<li class="card-li yellow">Aqua</li>
<li class="card-li jwhite">Pink</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
<div class="card">
<a href="">
<div class="img-div">
<img class="img" src="...">
<div class="desc">
<ul class="card-ul">
<li class="card-li black">Amber</li>
<li class="card-li yellow">Apricot</li>
<li class="card-li jwhite">Amethyst</li>
</ul>
<p>text</p>
</div>
</div>
<div class="title">
<p>text</p>
</div>
</a>
</div>
</div>
</div>