Поисковая строка на JavaScript

Поле поиска на веб-странице (пример Pinterest)

Поисковая строка — привычный элемент интерфейса, который полезен на любых сайтах с данными. В этой инструкции показан минимальный, понятный и полностью клиентский пример на HTML/CSS/JavaScript. Мы создадим: интерфейс, статический список строк и простую логику фильтрации, которая обновляет выпадающий список при вводе.

Важно: этот подход работает хорошо для небольших статических списков. Для больших наборов данных или динамических источников потребуется оптимизация (дебаунс, поиск на сервере, пагинация).

Что вы получите

Рабочий пример поисковой строки с выпадающим списком.
Пошаговые инструкции по HTML, CSS и JS файлам.
Советы, когда использовать клиентскую фильтрацию, а когда — серверный поиск.
Чек-листы, тест-кейсы и критерии приёмки.

Как добавить интерфейс для поисковой строки

Ваш сайт должен содержать поле ввода, где пользователь набирает поисковый запрос. Проще всего использовать и стилизовать его как поисковую строку.

Создайте папку для сайта. Внутри создайте файл index.html.
Заполните файл базовой структурой HTML. Пример:



  
    Searchbar

Внутри div.container добавьте input. При каждом вводе символа будет вызываться функция search(), которую мы реализуем позже.


    Search Countries

Примечание: атрибут autocomplete=”off” предотвращает автозаполнение браузера на основе прошлых вводов.

Создайте файл styles.css в той же папке.
Добавьте стили для страницы и поисковой строки:

body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
* {
  font-family: "Arial", sans-serif;
}
.container {
  padding: 100px 25%;
  display: flex;
  flex-direction: column;
  line-height: 2rem;
  font-size: 1.2em;
  color: #202C39;
}
#searchbar {
   padding: 15px;
   border-radius: 5px;
}
input[type=text] {
   -webkit-transition: width 0.15s ease-in-out;
   transition: width 0.15s ease-in-out;
}

Подключите CSS в head index.html:

Откройте index.html в браузере и проверьте интерфейс.

HTML website with searchbar in browser

Как создать массив строк для поиска

Перед поиском нужно иметь набор данных. В простейшем случае это массив строк (Array of strings). Мы динамически создадим список элементов в DOM при загрузке страницы.

Под полем ввода добавьте div, в котором будет отображаться выпадающий список:

Создайте файл script.js в той же папке.
В script.js объявите функцию loadSearchData() и инициализируйте массив строк. Это небольшой статический пример:

function loadSearchData() {
  // Data to be used in the searchbar
  let countries = [
    'Australia',
    'Austria',
    'Brazil',
    'Canada',
    'Denmark',
    'Egypt',
    'France',
    'Germany',
    'USA',
    'Vietnam'
  ];
}

Внутри loadSearchData() найдите элемент списка и добавьте для каждого элемента массива тег :

// Get the HTML element of the list
let list = document.getElementById('list');
// Add each data item as an  tag
countries.forEach((country)=>{
    let a = document.createElement("a");
    a.innerText = country;
    a.classList.add("listItem");
    list.appendChild(a);
})

В теле index.html добавьте атрибут onload, чтобы вызвать loadSearchData() при загрузке:

В конце тела подключите script.js:

Добавьте стили для выпадающего списка в styles.css:

#list {
   border: 1px solid lightgrey;
   border-radius: 5px;
   display: block;
}
.listItem {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   padding: 5px 20px;
   color: black;
}
.listItem:hover {
   background-color: lightgrey;
}

Откройте index.html — вы увидите список всех элементов (поиск ещё не работает).

Как сделать выпадающий список с совпадающими результатами

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

Сначала скройте список по умолчанию (замените display: block на display: none):

#list {
   border: 1px solid lightgrey;
   border-radius: 5px;
   display: none;
}

В script.js создайте функцию search(), которая будет вызываться при каждом нажатии клавиши:

function search() {
    // search functionality goes here
}

Внутри search() получите контейнер списка и элементы с классом listItem:

let listContainer = document.getElementById('list');
let listItems = document.getElementsByClassName('listItem');

Получите текущее значение инпута и приведите его к нижнему регистру:

let input = document.getElementById('searchbar').value
input = input.toLowerCase();

Сравните введённый текст с каждым элементом списка. Если элемент содержит подстроку — покажите его, иначе скройте:

let noResults = true;
for (i = 0; i < listItems.length; i++) {
    if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
        listItems[i].style.display="none";
        continue;
    }
    else {
        listItems[i].style.display="flex";
        noResults = false;
    }
}

Если совпадений нет, скрывайте контейнер целиком:

listContainer.style.display = noResults ? "none" : "block";

Проверьте в браузере: откройте index.html и начните вводить текст — список будет обновляться.

Как использовать выбранный результат

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

Для перехода на страницу добавьте href к .
Для автозаполнения инпута и закрытия списка — в обработчике клика присвойте input.value = this.innerText и спрячьте список.

Пример добавления обработчика при генерации списка:

countries.forEach((country)=>{
    let a = document.createElement("a");
    a.innerText = country;
    a.classList.add("listItem");
    a.href = "#"; // можно указать реальную ссылку
    a.addEventListener('click', function(e){
        e.preventDefault();
        document.getElementById('searchbar').value = this.innerText;
        document.getElementById('list').style.display = 'none';
    });
    list.appendChild(a);
})