Как сделать фильтр по городам?

Question

[DZHAMBUALT]

Здрасте. У меня есть блок с городами и есть поле в которое вводиться текст. Как присвоить класс 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", () => {
});

Comments

[Сергей delphinpro]

выбрать все элементы h2
пройтись циклом
проверить наличие в textContent введенного значения
если присутствует - добавить класс, иначе убрать

алгоритм вроде простой. Где у вас возникли затруднения?

[Александр Васильев]

Смотри в сторону связанных списков, к примеру попробуй select2 в связке с chained select. JSON, AJAX.

[Александр Васильев]

Со связанными я перегнул, но в целом селект 2 решит твою задачу

[DZHAMBUALT]

Сергей delphinpro, Ну смотрите в выше перечисленном HTML есть город Алтай я ввожу в поле "Ал" и класс не добавляется всем элементам у которых есть буквосочетание "Ал". Вот как сделать эту проверку я не знаю. Я пробовал методом includes но это не помогло.

[DZHAMBUALT]

Вот что у меня в конце концов получилось. Но загвоздка в том что когда я пишу что то и удаляю всё из поля (то есть делаю его пустым) то всё равно всем элементам добавляется класс active, такая же история и с пробелом в пустом поле.
JS

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

filter.addEventListener("input", () => {
  if (document.querySelector(".active")) {
    document.querySelectorAll(".active").forEach((el) => {
        el.classList.remove("active");
    });
  }
  cities.forEach((el) => {
    console.log();
    if (
      el.textContent
        .toLowerCase()
        .split("")
        .join(" ")
        .includes(filter.value.toLowerCase().split("").join(" "))
    ) {
      el.classList.add("active");
    }
  });
});

[Kentavr16]

DZHAMBUALT, а зачем ты делал сплит и джойн?

Answer 1

[Kentavr16]

Все делается довольно просто.