Как сделать поиск для сайта: урок на HTML и JavaScript
Пошаговый урок: форма поиска на HTML, поиск по странице на JavaScript, поиск по всему сайту через индекс в JSON и на сервере. И где простой поиск упирается в потолок.
Сделать поиск для своего сайта можно за вечер: форма на HTML и десяток строк на JavaScript. Такой поиск будет работать, пока страниц немного и посетители пишут запросы без ошибок. Дальше начинаются опечатки, падежи и тысячи товаров.
Ниже — урок в четыре шага, от формы до поиска на сервере, и разбор того, где простой поиск упирается в потолок.
С чего начать
Прежде чем писать код, ответьте на два вопроса.
- Что будет искаться. Только названия товаров или ещё описания, статьи, разделы.
- Где лежат данные. В HTML-страницах, в базе данных сайта или в файле выгрузки.
От ответов зависит, какой из шагов ниже вам нужен. Для сайта из десятка страниц хватит первых трёх. Для каталога из базы данных нужен четвёртый.
Шаг 1. Форма поиска на HTML
Форма отправляет запрос на страницу результатов. Атрибут type="search" даёт полю правильную клавиатуру на телефоне и крестик для очистки.
<form action="/search" method="get" role="search">
<input type="search" name="q" placeholder="Поиск по сайту" required>
<button type="submit">Найти</button>
</form>Имя поля q — общепринятое, его же ждут многие сервисы поиска. Как оформить форму, чтобы ею было удобно пользоваться, — в статье Строка поиска для сайта.
Шаг 2. Поиск на странице сайта на JavaScript
Самый простой вариант — искать по элементам, которые уже есть на странице, например по списку товаров или статей. Скрипт прячет всё, что не содержит запрос.
<input type="search" id="q" placeholder="Найти на странице">
<ul id="list">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>
<script>
const q = document.getElementById('q');
q.addEventListener('input', () => {
const text = q.value.trim().toLowerCase();
document.querySelectorAll('#list li').forEach(li => {
li.hidden = text && !li.textContent.toLowerCase().includes(text);
});
});
</script>Так работает фильтр по списку на одной странице. Искать по всему сайту он не умеет.
Шаг 3. Поиск по всему сайту: индекс в JSON
Чтобы искать по всем страницам без сервера, соберите индекс — файл со списком страниц, их заголовками и коротким текстом. Его можно создавать при сборке сайта или выгружать из CMS.
[
{"url": "/dostavka", "title": "Доставка", "text": "Сроки и стоимость доставки"},
{"url": "/oplata", "title": "Оплата", "text": "Способы оплаты заказа"}
]Страница результатов загружает индекс и ищет в нём слова запроса.
const q = new URLSearchParams(location.search).get('q') || '';
const words = q.toLowerCase().split(/\s+/).filter(Boolean);
fetch('/search-index.json')
.then(r => r.json())
.then(pages => {
const found = pages.filter(p => {
const hay = (p.title + ' ' + p.text).toLowerCase();
return words.every(w => hay.includes(w));
});
document.getElementById('results').innerHTML = found.length
? found.map(p => `<a href="${p.url}">${p.title}</a>`).join('<br>')
: 'Ничего не найдено';
});Этого хватает для сайта на десятки и сотни страниц. Индекс загружается целиком в браузер, поэтому при тысячах страниц он становится тяжёлым.
Шаг 4. Поиск на сервере
Если данные лежат в базе, поиск делают на сервере. Простейший вариант — запрос к базе с поиском подстроки. Лучше — полнотекстовый поиск самой базы данных: он учитывает формы слов и сортирует результаты по релевантности. Такой поиск есть в PostgreSQL и MySQL.
Обязательное правило: запрос посетителя нельзя вставлять в текст SQL-запроса напрямую. Только через параметры, иначе через строку поиска можно получить доступ к базе.
Где простой поиск упирается в потолок
- Опечатки. Поиск подстроки не найдёт товар, если в запросе ошибка. Подход к исправлению ошибок — в статье Исправление опечаток: словарь или модель.
- Падежи и формы слов. «Диваны» и «диван» для простого поиска — разные слова.
- Синонимы. Покупатель и владелец сайта называют одно и то же по-разному.
- Смысл. Если человек описал задачу, а не назвал товар, поиск по словам не найдёт ничего. Как это решают — в статье Векторный поиск: что это такое.
- Порядок результатов. Что показать первым: подходящее, популярное, в наличии.
- Объём. На тысячах товаров поиск без индекса начинает тормозить.
Каждый пункт — отдельная задача. Вместе они превращают «поиск за вечер» в проект на месяцы.
Разработка своего поиска или готовый
Своя разработка оправдана, если поиск — часть вашего продукта или есть особые требования к данным. Для поиска по каталогу или сайту компании обычно быстрее подключить готовый сервис. Сравнение трёх путей с ценой каждого — в статье Добавить поиск по сайту: три способа и цена каждого.
Вывод и следующий шаг
Простой поиск для сайта делается за вечер, и для небольшого сайта этого достаточно. Когда появляется каталог, опечатки и запросы своими словами, поиск по совпадению слов перестаёт находить нужное.
Поиск AISSE закрывает эти задачи без разработки: подключается строкой кода, понимает опечатки, формы слов и смысл запроса. Как поставить — в статье Как установить поиск на сайт.
Частые вопросы
Можно ли сделать поиск для сайта без сервера?
Да, с индексом в JSON, как в шаге 3. Это работает для сайта на десятки и сотни страниц.
Как сделать, чтобы поиск учитывал падежи?
Нужна морфология: приведение слов к начальной форме. Её умеет полнотекстовый поиск PostgreSQL и специализированные поисковые движки. В простом скрипте на JavaScript её придётся подключать отдельной библиотекой.
Сколько товаров выдержит поиск на JavaScript?
Ориентир — несколько сотен записей. Дальше индекс становится тяжёлым для загрузки, особенно на телефоне, и поиск лучше переносить на сервер.