Создание простой функциональности поиска

Введение

В этом проекте вы научитесь использовать JavaScript для реализации простой функциональности поиска. Вы научитесь связывать событие ввода с полем ввода, обрабатывать данные поиска и отображать результаты поиска.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• связывать событие input с полем ввода
• реализовывать метод handleInput для фильтрации данных поиска
• отображать результаты поиска в списке

🏆 Достижения

После завершения этого проекта вы сможете:

• использовать метод addEventListener для связывания событий
• использовать метод filter для фильтрации массива по условию
• манипулировать DOM для обновления результатов поиска

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

где:

• index.html - главная страница.
• css - папка для хранения стилей проекта.
• js/index.js - JavaScript-файл, в котором необходимо добавить код.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Отображение результатов поиска

В этом шаге вы реализуете метод render для отображения результатов поиска.

1. В файле js/index.js найдите метод render в объекте search.
2. Внутри метода render добавьте следующий код для генерации HTML-шаблона для результатов поиска и обновления элемента listEl:

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

Метод reduce используется для создания строки HTML-шаблона, которая отображает свойство content каждого элемента в массиве data.

Реализация метода handleInput

В этом шаге вы реализуете метод handleInput для обработки функциональности поиска.

1. В файле js/index.js найдите метод handleInput в объекте search.
2. Внутри метода handleInput добавьте следующий код для фильтрации массива data на основе значения ввода и последующего отображения результатов поиска:

const value = e.target.value;
// Используем таймер для имитации отправки запроса ajax, получения данных
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

Функция setTimeout используется для имитации асинхронной операции, такой как запрос AJAX, для получения данных поиска.

Связывание события ввода

В этом шаге вы научитесь связывать событие input с полем ввода и вызывать метод handleInput, когда значение в поле ввода меняется.

1. Откройте файл js/index.js.
2. Найдите функцию handle в объекте search.
3. Внутри функции handle добавьте следующий код для связывания события input с элементом inputEl и вызова метода handleInput:

this.inputEl.addEventListener("input", this.handleInput.bind(this));

Часть bind(this) важна для обеспечения того, чтобы this внутри метода handleInput ссылалось на сам объект search.

После завершения этих четырех шагов в файле js/index.js должен быть полноценный имплементация функциональности поиска, и проект должен работать как ожидается. Финальный эффект должен быть следующим:

Резюме

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