Как сделать поиск по сайту в HTML

2. Атрибут action определяет URL, на который будет отправлен запрос.

3. Атрибут method=»get» отправляет параметры запроса через URL.

Так выглядит простейшая форма поиска на сайте

Как работает поиск

Результаты поискового запроса отображаются на странице после того, как закончится обработка на стороне клиента (JavaScript). Альтернатива — отправка запроса на сервер и последующая обработка там (PHP, NodeJS).

Простой сценарий обработки на стороне клиента:

const data = ["article1", "article2", "article3"];
const results = data.filter(item => item.includes(query));

Обработка на стороне сервера может включать работу с базами данных и возвращение конечного результата в формате JSON или HTML.

Пример на PHP:

$query = $_GET['query'];
$results = searchDatabase($query);
foreach ($results as $result) {
    echo "<p>$result</p>";
}

Как задать поисковой форме CSS-стили

Для того, чтобы улучшить пользовательский опыт при взаимодействии с сайтом, поисковые элементы стилизуются при помощи CSS.

Например, мы хотим разместить поиск по центру экрана, увеличить размер элементов и покрасить кнопку в розовый цвет. Добавляем CSS:

form {
    display: flex;
    justify-content: center;
    margin: 20px;
}
input[type="text"] {
    width: 200px;
    padding: 5px;
    margin-right: 10px;
}
button {
    padding: 5px 10px;
  background-color: pink;
}

Результат выглядит так:

Делаем визуал интереснее

Расширенный поиск с использованием категорий и тэгов может быть реализован как на стороне клиента, так и на серверной стороне.

Например, магазин специализируется на трех разных направлениях, и мы хотим добавить фильтрацию по категориям.

<div> <input type="text" id="searchInput" placeholder="Введите запрос..."> <select id="categorySelect"> 
<option value="all">Все категории</option> 
<option value="electronics">Электроника</option>
 <option value="clothing">Одежда</option> 
<option value="books">Книги</option> 
</select> 
<button onclick="performSearch()">Искать</button> 
</div>

Появляется выпадающее меню с категориями товаров.

Пример расширенного поиска

Для работы с тегами и категориями на стороне сервера можно использовать специальные запросы, которые будут обращаться к соответствующим колонкам базы данных.

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

Заключение

Создать простой поиск несложно. Трудности начинаются, когда требуется добавить расширенные возможности. Работа с базами данных, алгоритмы сортировки результатов и многое другое — нетривиальные задачи. Они могут потребовать значительных ресурсов как по деньгам, так и по времени.

Умный поиск REES46 позволяет интегрировать эффективные поисковые алгоритмы на сайт, независимо от движка. Клиенты получают рост продаж и среднего чека. Например, kari увеличили выручку на 7%.

Попробовать умный поиск