Создание простой панели поиска

Создание простой панели поиска

Приближался конец Фазы 1 во Флэтайроне; Я знал, что мне нужно будет создать SPA (одностраничное приложение). Это было и волнительно, и напряжно. Было бы очень весело попробовать создать что-то с нуля, но с чего начать и что делать? В конечном счете, я решил создать приложение для инвентаризации моей коллекции записей, очень простое приложение, отвечающее требованиям. Тем не менее, я хотел подтолкнуть себя и сделать что-то, чего я никогда не делал. Итак, я решил добавить панель поиска, чтобы можно было использовать различные критерии для сужения всей коллекции.

Большая часть приложения казалась несколько простой, потому что мы делали подобные вещи в лабораториях на протяжении всей фазы. Я знал, как получить доступ к базе данных с помощью JSON и выборки. Я знал, как создавать элементы и добавлять их в DOM, но я продолжал размещать панель поиска в нижней части списка дел, потому что раньше этого не делал.

Наконец я не мог больше откладывать это, и мне пришлось взяться за дело, и вот как я это сделал:

Сначала у меня была выборка, извлекающая мои альбомы из файла json и немедленно создающая карты, которые были добавлены в DOM. Посмотрев несколько видео и немного почитав, я решил, что будет проще получить альбомы и поместить их в отдельный массив, чтобы использовать их, когда они мне понадобятся. Итак, я реорганизовал свою первоначальную выборку, чтобы позволить мне использовать мои альбомные данные везде, где они мне могут понадобиться.

let gotAlbums = [];
fetch('http://localhost:3000/albums')
.then(response => response.json())
.then(albumData => {
   gotAlbums = albumData})
};

Я уже настроил панель поиска в своем файле .html, которая будет доступна в моем «.collection» ‹div›, где мои карточки альбомов будут жить после того, как они будут переданы через мою функцию рендеринга. Я настроил прослушиватель событий на этой панели поиска, который будет прослушивать любой «вход».

searchBar.addEventListener("input", (e) => {
const searchString = e.target.value.toLowerCase();

Я назначил цель события константной переменной с именем searchString и применил метод toLowerCase(), потому что хотел, чтобы панель поиска возвращала все критерии поиска независимо от регистра, указанного внутри строки. панель поиска.

Отсюда я настроил еще одну константную переменную с именем filteredAlbums. Эта переменная будет использовать filter() для фильтрации моего массива gotAlbums, а метод includes() возвращает результат, если критерий включает переменную searchString. Я также устанавливаю возвраты toLowerCase(), чтобы предотвратить любые сбои, вызванные регистром здесь.

const filteredAlbums = gotAlbums.filter( album => {
   return 
          album.artist.toLowerCase().includes(searchString)||
          album.name.toLowerCase().includes(searchString)||
          album.genre.toLowerCase().includes(searchString)||
          album.release.includes(searchString)
   })

Теперь, когда у меня были все отфильтрованные альбомы, я хотел отобразить их там, где была вся коллекция. Функция прослушивателя событий продолжает очищать элементы HTML в переменной albumContainer и передает результаты массива filteredAlbums через мою функцию renderAlbum, добавляя только те альбомы, которые соответствуют критериям поиска.

albumContainer.innerHTML=""
filteredAlbums.forEach(renderAlbum)
})

Теперь у меня была рабочая панель поиска, которая возвращала конкретные карточки альбомов, которые соответствовали тому, что я ввел в поле ввода.

Вот код вместе:

let gotAlbums = [];
function searchCollection() {
   searchBar.addEventListener("input", (e) => {
   const searchString = e.target.value.toLowerCase();
   const filteredAlbums = gotAlbums.filter( album => {
      return
        album.artist.toLowerCase().includes(searchString) ||
        album.name.toLowerCase().includes(searchString) ||
        album.genre.toLowerCase().includes(searchString) ||
        album.release.includes(searchString)
        })
   albumContainer.innerHTML=""
   filteredAlbums.forEach(renderAlbum)
   })
};

Это видео Джеймса К. Куика очень помогло в создании этой панели поиска.

Как и это видео от Web Dev Simplified.

Я, вероятно, добавил еще 20 просмотров к каждому видео во время этого процесса.