Поиск

Контракт

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

Лупа несёт pointer-events: none: клик по значку попадает в поле, а не в пустоту перед ним.

Видимая <label for> предпочтительна; aria-label — когда поле стоит в панели инструментов и подпись съела бы строку. Тип search объявляет поле как поле поиска сам, и role="search" руками ставить не нужно.

Лупа — псевдоэлемент, и для скринридера её нет вовсе. Это правильно: значок украшение, а работу называет подпись. Значок берёт --text-muted по той же причине, крестик темнеет на наведении до --text-primary.

Очистка — нативная кнопка браузера, клавиатурный эквивалент Esc тоже нативный. Крестик размером --size-chevron, 10px, но единственным способом стереть значение он не является: есть выделение и Backspace.

Размеры

Все — от текстового поля, потому что inst-search не заводит своих.

<span class="inst-search">
  <input class="inst-input inst-input--sm" type="search" value="sm" aria-label="Поиск sm">
</span>
<span class="inst-search">
  <input class="inst-input" type="search" value="md" aria-label="Поиск md">
</span>
<span class="inst-search">
  <input class="inst-input inst-input--lg" type="search" value="lg" aria-label="Поиск lg">
</span>

Отступ под лупу считается от --control-pad-sm и ширины значка, поэтому у всех трёх размеров текст начинается на одинаковом расстоянии от значка, а не наезжает на него в sm.

Состояния

<span class="inst-search">
  <input class="inst-input" type="search" value="Обычное" aria-label="Поиск обычный">
</span>
<span class="inst-search">
  <input class="inst-input" type="search" value="Недоступно" disabled aria-label="Поиск недоступен">
</span>

Наведение, фокус, ошибка, readonly и disabled — те же, что у текстового поля.

Поведение

Очистка

Крестик очистки — собственная кнопка браузера (::-webkit-search-cancel-button), приведённая к тону библиотеки: тот же глиф и тот же приглушённый цвет, что у снятия тега. Её не прячут и не подменяют — поведение «очистить и сообщить об этом форме» уже написано платформой, и своя кнопка означала бы JS ради того, что уже работает.

JS

Поле работает без единой строки: type="search" даёт нативную кнопку очистки, Escape очищает, форма отправляется по Enter. Скрипт нужен, только если результаты обновляются на лету.

Фильтрация на лету

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  for (const row of rows) {
    row.hidden = q !== '' && !row.dataset.name.includes(q);
  }
  count.textContent = rows.filter((r) => !r.hidden).length;
});

Читается input, а не keyup: очистка крестиком, вставка мышью и автозаполнение keyup не порождают, и список молча оставался бы старым.

Что сказать вслух

Число найденного обязано попадать в живую область — иначе для скринридера список меняется беззвучно.

<p class="inst-u-visually-hidden" aria-live="polite">
  <span id="count">12</span> совпадений
</p>

Композиции

В панели инструментов

<div class="inst-toolbar">
  <span class="inst-search">
    <input class="inst-input inst-input--sm" type="search" placeholder="Фильтр" aria-label="Фильтр по задачам">
  </span>
  <button class="inst-btn inst-btn--sm" type="button">Сбросить</button>
</div>

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

<div class="inst-field">
  <label class="inst-label" for="q2">Поиск по логу</label>
  <span class="inst-search">
    <input class="inst-input" id="q2" type="search" aria-describedby="q2-hint">
  </span>
  <span class="inst-field-hint" id="q2-hint">Поддерживаются кавычки и минус для исключения</span>
</div>

API

Связанное

Текстовое полеСелектТулбар