Как исправить ошибку в живом поиске на JavaScript?

Как можно улучшить код для скрытия неподходящих элементов списка при вводе текста в поле input? На данный момент при вводе текста в поле input ничего не происходит, а необходимо, чтобы неподходящие строки скрывались, а подходящие показывались.
  • 27 декабря 2023 г. 23:17
Ответы на вопрос 2
Для исправления ошибки и улучшения кода для скрытия неподходящих элементов списка при вводе текста в поле input, вы можете использовать следующий подход:

1. Убедитесь, что вы получаете ссылку на поле input и список элементов, которые нужно фильтровать. Например, задайте им уникальные идентификаторы, чтобы получить доступ через метод getElementById():

```javascript
var inputField = document.getElementById("myInput");
var listItems = document.getElementById("myList").getElementsByTagName("li");
```

2. Зарегистрируйте обработчик события input на поле ввода, чтобы выполнять фильтрацию по мере ввода текста:

```javascript
inputField.addEventListener("input", filterList);
```

3. Внутри обработчика события создайте функцию filterList(), которая будет обходить все элементы списка и скрывать неподходящие элементы, а затем показывать подходящие:

```javascript
function filterList() {
    var filterValue = inputField.value.toLowerCase(); // Приводим введенный текст к нижнему регистру

    for (var i = 0; i < listItems.length; i++) {
        var currentItem = listItems[i];
        var itemText = currentItem.textContent.toLowerCase(); // Приводим текст элемента списка к нижнему регистру

        // Проверяем, содержит ли текст элемента введенное значение
        if (itemText.indexOf(filterValue) > -1) {
            currentItem.style.display = "";
        } else {
            currentItem.style.display = "none";
        }
    }
}
```

Теперь, при вводе текста в поле input, функция filterList() будет выполняться и скрывать неподходящие элементы списка, а показывать подходящие.

Убедитесь, что у полей input и списка есть корректные идентификаторы в HTML-коде:

```html
<input type="text" id="myInput">
<ul id="myList">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
    <!-- ... -->
</ul>
```

Это решение простое и эффективное для фильтрации элементов списка по мере ввода текста в поле input.
1. Используйте нормальную IDE. Вы не видите, что var list у вас объявлено 2 раза? 
2. Учитесь отлаживаться. Разберитесь как пользоваться отладчиком в браузере. Пройдитесь построчно по своему коду, проверяйте после каждой строки, что находится в переменных.
3. document.querySelectorAll('.ul li');
Почему .ul? Откуда точка? Вы понимаете, что значит точка в css-селекторе?
Уберите её.
Похожие вопросы