Fatal编程技术网
  • javascript/
  • Javascript 如何使用JQuery在图库上设置搜索过滤器功能？它需要隐藏与实时关键项不匹配的结果

Javascript 如何使用JQuery在图库上设置搜索过滤器功能？它需要隐藏与实时关键项不匹配的结果

javascript jquery

Javascript 如何使用JQuery在图库上设置搜索过滤器功能？它需要隐藏与实时关键项不匹配的结果,javascript,jquery,image-gallery,searchbar,Javascript,Jquery,Image Gallery,Searchbar,我正在创建一个带有搜索过滤器功能的图库。搜索过滤器应该根据输入的每个键过滤掉显示的缩略图。搜索基于存储在标题标签中的img标题。例如，如果我键入“la”，则在输入“lake”之前，标题中包含匹配文本的所有图像都应出现 我的脚本包含存储搜索词和图像标题的变量，但不确定我是否正确。然后，我添加了一个函数，其中包含一个用于搜索项的变量。在我的日志中，每个关键字条目都会实时显示搜索词 我添加了console.log$img==$searchTerm；确保我的思路正确，搜索条目将返回true，但它会不断返

我正在创建一个带有搜索过滤器功能的图库。搜索过滤器应该根据输入的每个键过滤掉显示的缩略图。搜索基于存储在标题标签中的img标题。例如，如果我键入“la”，则在输入“lake”之前，标题中包含匹配文本的所有图像都应出现

我的脚本包含存储搜索词和图像标题的变量，但不确定我是否正确。然后，我添加了一个函数，其中包含一个用于搜索项的变量。在我的日志中，每个关键字条目都会实时显示搜索词

我添加了console.log$img==$searchTerm；确保我的思路正确，搜索条目将返回true，但它会不断返回false。这可能不是最理想/最有效的方法，但我的想法是，在操作DOM之前，应该先记录正确的结果

除了我已经在使用的lightbox插件之外，我宁愿不使用插件。我想了解如何添加搜索功能以及它是如何工作的

HTML示例

再次感谢您的任何意见

您喜欢这项工作吗

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(); 
        }

    });

    }

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

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;
  }
}
非常感谢你！我已经做了好几个小时了。它工作完美！我真的很感谢你的回答和帮助，尤其是笔记。我有一个问题，它的元素隐藏在backspace中，所以我修改它为！title.includeSearchTerm&&searchTerm！==空，这是有效的。这是首选方法还是错误代码？另外，关于indexOf，我需要一些澄清。我试过了！title.includeSearchTerm | |！title.indexOfsearchTerm&&。。。还有…| |！标题.索引$imgList&。。。。第二个脚本在Chrome上运行，但不是IE，所以我尝试了…| |！标题.索引$img&&。。。。如果我理解正确，我会根据所有的标题标签检查搜索，对吗？再次感谢！当你退格时一切都隐藏了？这不应该发生，因为我们先显示所有内容，然后只隐藏不匹配的内容。你能多告诉我一点正在发生的事吗？我还为indexOf函数添加了一些额外的代码。您不是将它与数组进行比较，而是每个数组的标题（如果有帮助的话）。使用普通Javascript是个好主意。如果我们将CSS引入其中，那么类切换可能比更改显示样式更好。好主意。 
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(); 
        }

    });

    }

});

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>