Настройка функции поиска на веб-странице

Итак, мне удалось собрать что-то вроде функции поиска на моей веб-странице, однако, скажем, я ищу «Аметист», он также сгруппирует «Плейсхолдер1» в поиске.

Вероятно, есть что-то очень очевидное, что я здесь упускаю, но я помещу здесь небольшой фрагмент кода, которого недостаточно для повторного создания, но он довольно прост.

var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction(e) {
  var filter = e.target.value.toUpperCase();

  var list = document.getElementById("products");
  var divs = list.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    var a = divs[i].getElementsByTagName("a")[0];

    if (a) {
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        divs[i].style.display = "";
      } else {
        divs[i].style.display = "none";
      }
    }
  }

}

<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">



<div id="products" class=" w3-row w3-grayscale" style="width:100%">
      
 <div class="w3-col l3 s6">
       <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br>£45.00</p>
      </div></a>
     
      <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br>£0.00</p>
      </div></a>
</div>

ПРИМЕЧАНИЕ. Этого кода недостаточно, чтобы воспроизвести что-либо, но я совершенно уверен, что проблема заключается в этом коде.

Если есть что-то еще, что вам нужно помочь, что я пропустил, пожалуйста, дайте мне знать. Спасибо!

html search javascript

17.05.2022 17:34

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основная проблема здесь в том, что вы пытаетесь получить значение e.target.value.toUpperCase(), которое не определено. На самом деле вам нужно значение myInput в верхнем регистре, так как это то, что вы захотите найти в своем HTML-контенте.

Вот рефакторинг вашего скрипта с использованием querySelector с вашим существующим HTML-контентом, который будет работать (и более эффективный цикл for). Этот код будет смотреть только на тег абзаца, который содержит ваше описание.

<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction() {

  var filter = document.getElementById("myInput").value.toUpperCase();
  
  var paragraphs = document.querySelectorAll("#products div a p")
  
  for (let i=0, p; p = paragraphs[i]; i++)
  {
     if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
     {
        p.parentElement.parentElement.style.display = "block";
    }
    else
    {
        p.parentElement.parentElement.style.display = "none";
    }
  }
}
</script>

17.05.2022 19:12

Другие вопросы по теме

Как я могу изменить тег div на кнопку тега, чтобы активировать меню с помощью функции js?

Форматирование чисел JavaScript при вводе запятыми не работает

Как заставить веб-сайт сохранять то, что мы вводим в поле ввода, используя localStorage?

Кнопка «следующая/предыдущая» активируется при нумерации страниц с помощью jquery

Как ввести без изменения фокуса

Реакция с Typescript: свойство «имя» не существует для типа «DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>»

Как включить заполнитель для плавающего поля ввода в ответ?

Заполнение не работает в горизонтальной строке css html

Как установить часовой пояс с помощью php

Граница таблицы html css

Настройка функции поиска на веб-странице

Ответы 1

Другие вопросы по теме

Похожие вопросы