0

у меня не получается сделать живой поиск, в свое коде я нашел все картинки, отфильтровав их в объект по ссылке и alt, и уже через forEach и indexOf нахожу индекс совпадений. но как вывести совпадения я не понимаю и встал в ступор. либо подскажите как мне сохранить в массив cache объект с изображение, а не его ссылкой.

var images = document.querySelectorAll('img');
var search = document.getElementById('search_filter');
var arrayImages= [];
var i =0;
var cache = [];


window.onload = function(){

    for( var i = 0; i<images.length; i++){
       arrayImages.push(images[i])
    }

    arrayImages.forEach(function(element){
        cache.push( {
            src:element.src,
            text: element.alt.toLowerCase(),
                })
    })
}

search.addEventListener('input', function (value){
     var valyeINinput = this.value;

    cache.forEach(function(img){
        var index1 = 0;
        if(valyeINinput){
            index1  = img.text.indexOf(valyeINinput);
        }
        //вот тут я пытаюсь вывести img.src.style.display = "block" . но это лишь добавляет свойство.
    })

})
1
  • В метки следует писать используемые технологии, например если вопрос касается получения/изменения/удаления DOM элементов на чистом js, то достаточно будет метки javascript, при вопросе затрагивающем изменения стилей, можно добавить метку css, но это не значит что в этом случае надо добавить конкретные методы, вида queryElement, style. ну надеюсь вы поняли
    – Bald
    26 апр 2019 в 3:45

1 ответ 1

2

Главная ошибка - вы пытаетесь присвоить свойство style строке с адресом к картинке img.src. Вам нужно было в кеше сохранять ссылку на сам объект картинки, т.е.

cache.push({
    image: element,
    text: element.alt.toLowerCase()
})

Не реализован сам поиск среди картинок, вы лишь находите номер символа, с которого начинается совпадение между строкой ввода и текстом картинки, т.е.

if (img.text.indexOf(valyeINinput) !== -1) {
    img.image.style.display = 'inline';
} else {
    img.image.style.display = 'none';
}

Ну и просто в качестве улучшения, можно пропустить шаг с созданием дополнительного массива arrayImages, используя Array.prototype.forEach

var images = document.querySelectorAll('img');
var search = document.getElementById('search_filter');
var cache = [];


window.onload = function() {
  Array.prototype.forEach.call(images, function(element) {
    cache.push({
      image: element,
      text: element.alt.toLowerCase()
    })
  })
}

search.addEventListener('input', function() {
  var valyeINinput = this.value;

  cache.forEach(function(img) {
    if (valyeINinput) {
      if (img.text.indexOf(valyeINinput) !== -1) {
        img.image.style.display = 'inline';
      } else {
        img.image.style.display = 'none';
      }
    } else {
      img.image.style.display = 'inline';
    }
  })

})
<input type="text" id="search_filter"><br>
<img src="https://via.placeholder.com/30/000" alt="Black">
<img src="https://via.placeholder.com/30/f00" alt="Red">
<img src="https://via.placeholder.com/30/0f0" alt="Green">
<img src="https://via.placeholder.com/30/00f" alt="Blue">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.