Как сделать поиск и фильтр с помощью JavaScript

Question

Итак, я пытаюсь найти фильтр фотографий. Я в состоянии добраться до функции keyup, но затем застрял на том, как искать и выбирать текст абзаца. Я не могу изменить HTML и могу только добавить Javascript.

И что у меня есть в моем Javascript

window.addEventListener('load', function(e) {

  const query = document.querySelector('#filter');

  let images = document.querySelector('.thumb-display');


    query.addEventListener('keyup', function(e) {
        let search = query.value;


         for (var i = 0; i < images.length; i++) {
            let searchVal = images[i].getElementByTagName('p')[0].innerHTML;

            if (searchVal.indexOf(search) > -1) {
                images[i].display = "";

            } else {
                images[i].display = "none";
            };
        }; 

    });


  })// NO CODE OUTSIDE OF HERE

Я хочу иметь возможность искать (например) #oceanbeach# mountainroad

text и изображения, которые не соответствуют поиску, будут скрыты, но я не могу заставить его работать.

Answer 1

let images = document.querySelector('.thumb-display'); 

Я думаю, что вы ищете .querySelectorAll(). Это было бы хорошее место для начала:

let images = [ ...document.querySelectorAll('.thumb-display') ];

Answer 2

Чтобы выбрать все элементы .thumb-display, вы должны использовать Document.querySelectorAll ()

• document.querySelectorAll('.thumb-display')

И тогда вы можетеделать:

const query = document.querySelector('#filter')
const reset = document.querySelector('.reset')
const thumbs = document.querySelectorAll('.thumb-display')

query.addEventListener('keyup', () => thumbs.forEach(t => {
  const p = t.querySelector('p')
  t.style.display = p.innerText.includes(query.value) ? '' : 'none'
}))

reset.addEventListener('click', (e) => {
  e.preventDefault()
  query.value  = ''
  thumbs.forEach(t => t.style.display = '')
})

img {
  background: grey;
  height: 20px;
  width: 60px;
}

<div class="wrapper">
  <nav>
    <form class="frm-filter">
      <div class="frm-group">
        <a class="reset hidden" href="#">Reset</a>
        <input class="form-control" type="text" id="filter" name="filter" placeholder="tag filter" />
      </div>
    </form>
  </nav>
  <section class="gallery">
    <div class="row">
      <h1>Gallery</h1>
    </div>
    <div class="row">
      <div class="thumb-display">
        <img />
        <p class="tags">#africa #mountain #road</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#palmbeach #distantpeaks</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#oceanbeach #mountainroad</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#lake #clearskies #onthewater</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#fallcolors #bridgecrossing #river</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#fallcolors #slowdown</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#falltrees</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#ontheroad #falldriving</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#mountainflowers #clouds #river</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#mountainlake #retreat</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#stormcoming #thepeak</p>
      </div>
      <div class="thumb-display">
        <img />
        <p class="tags">#perfectbeach #whitesand</p>
      </div>
    </div>
  </section>
</div>

Answer 3

Вы можете использовать событие input для текстового поля и прокручивать теги p, чтобы показать / скрыть .thumb-display.

const txtFilter = document.getElementById('filter');
const lnkReset = document.querySelector('.reset');
const thumbnails = document.querySelectorAll('.thumb-display');
const tagContainers = document.querySelectorAll('.tags');

txtFilter.addEventListener('input', e => {
  const filter = e.target.value;

  if (filter === '') {
    resetFilter();
  } else {
    // Show the reset link/button.
  	lnkReset.classList.remove('hidden');
  
    tagContainers.forEach(tagContainer => {
      const thumbnail = tagContainer.closest('.thumb-display');
      const tags = tagContainer.innerText;
      
      if (tags.indexOf(filter) >= 0) {
      	thumbnail.classList.remove('hidden');
      } else {
      	thumbnail.classList.add('hidden');
      }
    });
  }
});

lnkReset.addEventListener('click', e => {
  e.preventDefault();
  resetFilter();
});

function resetFilter() {
  thumbnails.forEach(thumbnail => thumbnail.classList.remove('hidden'));
  lnkReset.classList.add('hidden');
  
  txtFilter.value = '';
}

body {
  font: normal 14px/1.4 sans-serif;
}

img {
  background: #eee;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.hidden {
  display: none;
}

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
  </ul>
  <form class="frm-filter">
    <div class="frm-group">
      <a class="reset hidden" href="#">Reset</a>
      <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
    </div>
  </form>
</nav>
<section class="gallery">
  <div class="row">
    <h1>Gallery</h1>
  </div>
  <div class="row">
    <div class="thumb-display">
      <img />
      <p class="tags">#africa #mountain #road</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#palmbeach #distantpeaks</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#oceanbeach #mountainroad</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#lake #clearskies #onthewater</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#fallcolors #bridgecrossing #river</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#fallcolors #slowdown</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#falltrees</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#ontheroad #falldriving</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#mountainflowers #clouds #river</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#mountainlake #retreat</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#stormcoming #thepeak</p>
    </div>
    <div class="thumb-display">
      <img />
      <p class="tags">#perfectbeach #whitesand</p>
    </div>
  </div>
</section>

Обратите внимание, что это просто проверяет значение innerText тега p.