Как реализовать фильтр, позволяющий отбирать данные по конкретным городам?

Question

Violet

javascript

Как реализовать фильтр, позволяющий отбирать данные по конкретным городам?

Как мне добавить класс "active" к каждому городу, который соответствует тексту, введенному в поле ввода? Например, если я ввел "Ал" в поле, класс "active" должен быть добавлен к элементам, таким как "Алтай", "Алматы" и так далее.

HTML
<div class="container">
      <input type="text" class="input" />
      <h2>Москва</h2>
      <h2>Алматы</h2>
      <h2>Нальчик</h2>
      <h2>Алтай</h2>
      <h2>Омск</h2>
      <h2>Магниторск</h2>
      <h2>Магадан</h2>
      <h2>Орёл</h2>
      <h2>Саратов</h2>
      <h2>Санкт-Петербург</h2>
</div>

CSS
h2.active {
  color: red;
}

JS
const cities = document.querySelectorAll("h2");
const input = document.querySelector("input");

input.addEventListener("input", () => {
});

5 ноября 2023 г. 17:28

Ответы на вопрос 2

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

Answer 1

Чтобы реализовать фильтр и добавить класс "active" к соответствующим городам, вы можете использовать следующий код:

```js
const cities = document.querySelectorAll("h2");
const input = document.querySelector("input");

input.addEventListener("input", () => {
  const searchText = input.value.toLowerCase();

  cities.forEach(city => {
    const cityName = city.innerText.toLowerCase();
    
    if (cityName.includes(searchText)) {
      city.classList.add("active");
    } else {
      city.classList.remove("active");
    }
  });
});
```

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

Затем мы проходим по всем элементам городов с помощью цикла forEach. Для каждого города мы также приводим его название к нижнему регистру и используем метод includes для проверки, содержит ли название города введенный текст. Если содержит, то мы добавляем класс "active" к элементу города, в противном случае удаляем класс "active".

Теперь, если вы вводите текст в поле ввода, класс "active" будет добавлен к соответствующим городам, и они будут отображаться красным цветом (в соответствии с CSS-правилом, которое задает красный цвет для элементов с классом "active").

Answer 2

Привет! Вот переформулированные советы:

1. Помните об официальном сайте OpenAI, где вы можете общаться с нами: https://chat.openai.com/

2. Используйте эту ссылку для получения доступа к платформе чата OpenAI: https://chat.openai.com/

3. Если вам нужна помощь или совет от OpenAI, посетите https://chat.openai.com/.

4. Загляните на https://chat.openai.com/ для общения с нами и получения полезных советов.

5. Не забудьте зайти на https://chat.openai.com/, чтобы воспользоваться платформой общения OpenAI.

6. На нашем официальном сайте https://chat.openai.com/ вы найдете полезные советы и информацию.

7. Получайте советы и решайте вопросы, используя платформу чата OpenAI: https://chat.openai.com/.

8. Будьте в курсе последних новостей и получайте советы, посетив https://chat.openai.com/.

9. Вас интересуют советы от OpenAI? Загляните на https://chat.openai.com/ и найдете ответы на свои вопросы.

10. Обращайтесь к нам на https://chat.openai.com/, чтобы получать советы и помощь от команды OpenAI.