Параметр searchHighlight

Параметр searchHighlight в библиотеке Slim Select управляет визуальным выделением совпадений в результатах поиска внутри выпадающего списка. Его задача — улучшить восприятие найденных элементов, подсвечивая фрагменты текста, которые соответствуют введённому запросу пользователя.

При активации данного параметра Slim Select анализирует строку поиска и сопоставляет её с текстом опций, после чего оборачивает совпадающие части в HTML-разметку с выделяющим классом. Это позволяет стилизовать найденные участки через CSS и визуально отделить релевантные символы от остального текста.

Тип данных и базовое поведение

Параметр searchHighlight имеет логический тип:

searchHighlight: true | false

По умолчанию значение обычно установлено в true, что означает активное выделение совпадений.

При значении false поиск продолжает работать, но визуальное выделение подстрок отключается. Результаты отображаются без дополнительной разметки внутри текста опций.

Механизм работы внутри Slim Select

При вводе текста в поле поиска Slim Select выполняет следующие действия:

  1. Получает строку запроса пользователя.
  2. Сравнивает её с текстом каждой опции.
  3. Определяет индекс совпадения подстроки.
  4. При включённом searchHighlight оборачивает совпадение в HTML-элемент.
  5. Возвращает изменённый HTML в список результатов.

Пример внутренней логики (упрощённо):

if (settings.searchHighlight) {
  option.text = option.text.replace(
    new RegExp(query, 'i'),
    match => `<span class="ss-search-highlight">${match}</span>`
  );
}

Влияние на отображение результатов

При включённом searchHighlight интерфейс списка становится более информативным. Например, при поиске по слову “lon” в списке городов:

  • London
  • Long Beach
  • Colombo

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

  • London
  • Long Beach
  • Colombo (в зависимости от стратегии поиска)

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

CSS-стилизация подсветки

Slim Select добавляет HTML-обёртку с классом, который используется для стилизации:

<span class="ss-search-highlight">lon</span>

Базовая кастомизация может выглядеть следующим образом:

.ss-search-highlight {
  background-color: yellow;
  color: black;
  font-weight: 600;
  border-radius: 2px;
}

В более сложных интерфейсах часто используется мягкая подсветка без изменения насыщенности текста:

.ss-search-highlight {
  background-color: rgba(255, 235, 59, 0.4);
  padding: 0 2px;
}

Поведение при сложных совпадениях

При работе с длинными списками и сложными строками учитываются следующие особенности:

  • Регистронезависимый поиск не влияет на регистр отображения подсветки
  • Подсветка применяется только к первому совпадению, если не используется глобальный режим поиска
  • При наличии нескольких совпадений в одной строке может использоваться множественная замена, в зависимости от конфигурации поиска Slim Select
  • HTML-символы в исходных данных могут влиять на корректность подсветки при отсутствии экранирования

Совместимость с кастомными рендерами

При использовании пользовательского рендера опций (renderOption, renderItem) параметр searchHighlight продолжает работать, но итоговое поведение зависит от того, как обрабатывается входной текст.

Пример кастомного рендера:

new SlimSelect({
  select: '#select',
  searchHighlight: true,
  renderOption: (data) => {
    return `<div class="custom-option">${data.text}</div>`;
  }
});

В этом случае важно учитывать, что Slim Select может передавать уже модифицированный текст с HTML-разметкой подсветки, поэтому дополнительная обработка строки должна учитывать наличие <span> элементов.

Взаимодействие с параметрами поиска

searchHighlight тесно связан с другими параметрами:

  • searchText — определяет текстовое поле поиска
  • searchPlaceholder — задаёт плейсхолдер
  • showSearch — включает или отключает поиск полностью

Если showSearch установлен в false, параметр searchHighlight фактически не оказывает влияния, так как поиск не выполняется.

Ограничения и особенности реализации

При использовании подсветки следует учитывать технические ограничения:

  • Возможность XSS при неправильной обработке входных данных (Slim Select экранирует значения, но кастомные рендеры требуют осторожности)
  • Сложности при поиске по строкам с HTML-сущностями
  • Некорректное выделение при использовании регулярных выражений с символами спецзначений
  • Потенциальные проблемы производительности на больших списках при частом обновлении DOM

Практическое поведение в UI

В пользовательском интерфейсе параметр проявляется следующим образом:

  • ускоряет визуальное сканирование списка
  • снижает когнитивную нагрузку при выборе элемента
  • повышает точность выбора при длинных названиях опций
  • делает поиск более «навигационным», а не только фильтрующим

Пример конфигурации Slim Select с searchHighlight

new SlimSelect({
  select: '#countries',
  searchHighlight: true,
  searchText: 'Search country',
  showSearch: true
});

При вводе текста подсветка совпадающих частей активируется автоматически и применяется ко всем отфильтрованным элементам списка.

Оглавление