Минимальная длина поискового запроса

Параметр searchFloor в библиотеке Choices.js определяет минимальное количество символов, которое пользователь должен ввести перед запуском поиска по элементам списка.

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

Базовый пример:

const choices = new Choices('#cities', {
  searchEnabled: true,
  searchFloor: 3
});

В данном случае поиск начнёт работать только после ввода трёх символов.

Принцип работы минимальной длины запроса

Когда поле поиска активно, Choices.js отслеживает ввод текста внутри внутреннего input-элемента. До достижения значения searchFloor библиотека:

  • не запускает фильтрацию;
  • не скрывает элементы списка;
  • не вызывает полноценный поиск;
  • не обновляет результаты.

После достижения минимальной длины:

  • выполняется поиск по доступным элементам;
  • список фильтруется;
  • отображаются найденные совпадения.

Например:

new Choices('#frameworks', {
  searchEnabled: true,
  searchFloor: 2
});

Поведение:

Ввод Поиск
r не выполняется
re выполняется
rea выполняется

Значение по умолчанию

По умолчанию:

searchFloor: 1

Это означает, что поиск начинается сразу после ввода первого символа.

Стандартное поведение подходит для:

  • небольших списков;
  • локальных данных;
  • простых select-компонентов;
  • интерфейсов с быстрым откликом.

Использование с большими наборами данных

При наличии сотен или тысяч элементов постоянная фильтрация после каждого символа может:

  • увеличивать нагрузку;
  • вызывать задержки интерфейса;
  • ухудшать производительность;
  • создавать лишние операции перерисовки DOM.

В таких случаях searchFloor обычно увеличивают.

Пример:

new Choices('#countries', {
  searchEnabled: true,
  searchFloor: 3
});

Такой подход уменьшает количество поисковых операций.

Оптимизация AJAX-поиска

Параметр особенно полезен при интеграции с серверным поиском.

Без ограничения длины запроса пользователь может вызывать множество запросов:

a
ab
abc
abcd

Это приводит к:

  • лишним HTTP-запросам;
  • нагрузке на сервер;
  • ненужному трафику;
  • скачкам интерфейса.

Корректная настройка:

new Choices('#users', {
  searchEnabled: true,
  searchFloor: 3
});

Теперь запросы можно отправлять только после ввода минимум трёх символов.

Комбинация с событием поиска

Choices.js предоставляет событие search, которое можно использовать для AJAX-загрузки.

Пример:

const element = document.querySelector('#users');

const choices = new Choices(element, {
  searchEnabled: true,
  searchFloor: 3
});

element.addEventListener('search', async (event) => {
  const value = event.detail.value;

  const response = await fetch(`/api/users?q=${value}`);
  const users = await response.json();

  choices.clearChoices();

  choices.setChoices(
    users,
    'id',
    'name',
    true
  );
});

В этом случае событие не будет вызываться до достижения минимальной длины.

Влияние на UX

Минимальная длина поиска напрямую влияет на удобство интерфейса.

Слишком маленькое значение

searchFloor: 1

Проблемы:

  • слишком частая фильтрация;
  • нестабильный список;
  • большое количество совпадений;
  • высокая нагрузка при динамическом поиске.

Слишком большое значение

searchFloor: 6

Проблемы:

  • пользователь долго не видит результатов;
  • интерфейс кажется неработающим;
  • ухудшается восприятие поиска.

Оптимальные значения

На практике чаще всего используются:

Тип данных Рекомендуемое значение
Маленький список 1
Средний список 2
Большой список 3
Серверный поиск 3–4

Работа с тегами (tags input)

При использовании текстовых тегов минимальная длина поиска также применяется к поиску совпадений.

Пример:

new Choices('#tags', {
  removeItemButton: true,
  searchEnabled: true,
  searchFloor: 2
});

Если пользователь вводит один символ:

j

подсказки не отображаются.

После:

js

начинается поиск совпадений.

Совместное использование с searchResultLimit

searchFloor хорошо сочетается с ограничением количества результатов.

Пример:

new Choices('#languages', {
  searchEnabled: true,
  searchFloor: 2,
  searchResultLimit: 10
});

Здесь:

  • поиск начинается после двух символов;
  • отображается максимум десять результатов.

Такой подход уменьшает нагрузку на интерфейс.

Совместное использование с shouldSort

При отключённой сортировке минимальная длина поиска помогает сохранить производительность.

new Choices('#products', {
  searchEnabled: true,
  shouldSort: false,
  searchFloor: 3
});

Особенно полезно при работе с большими списками товаров.

Динамическое изменение параметра

После создания экземпляра Choices.js изменить searchFloor напрямую нельзя через публичный API, однако возможно пересоздать компонент.

Пример:

let choices = new Choices('#cities', {
  searchFloor: 1
});

function updateSearchFloor(value) {
  choices.destroy();

  choices = new Choices('#cities', {
    searchFloor: value
  });
}

Полное отключение раннего поиска

Иногда необходимо практически полностью отключить поиск до ввода полноценного слова.

Пример:

new Choices('#dictionary', {
  searchFloor: 5
});

Это полезно:

  • для словарей;
  • больших каталогов;
  • медицинских терминов;
  • баз товаров;
  • поиска по API.

Взаимодействие с noResultsText

Параметр влияет на отображение сообщения об отсутствии результатов.

Пример:

new Choices('#movies', {
  searchEnabled: true,
  searchFloor: 3,
  noResultsText: 'Ничего не найдено'
});

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

  • поиск не запускается;
  • сообщение не отображается.

После запуска поиска сообщение появляется только при отсутствии совпадений.

Проверка текущего поискового ввода

Внутри события search можно анализировать длину запроса вручную.

element.addEventListener('search', (event) => {
  const value = event.detail.value;

  if (value.length < 3) {
    return;
  }

  console.log('Поиск:', value);
});

Это позволяет создавать дополнительную логику поверх searchFloor.

Использование с удалённой фильтрацией

Иногда локальный поиск полностью отключают, используя только серверную фильтрацию.

Пример:

new Choices('#employees', {
  searchEnabled: true,
  searchChoices: false,
  searchFloor: 3
});

Здесь:

  • локальная фильтрация не выполняется;
  • поиск используется только как поле ввода;
  • результаты приходят с сервера.

Типичные ошибки

Слишком маленький searchFloor при AJAX

searchFloor: 1

Результат:

  • десятки запросов;
  • нагрузка на API;
  • мерцание результатов.

Слишком большое значение для коротких данных

searchFloor: 8

Проблема:

  • поиск по коротким названиям становится неудобным.

Например:

CSS
HTML
Vue
React

Большинство значений невозможно найти быстро.

Отсутствие debounce-механизма

Даже при наличии searchFloor желательно использовать задержку запросов.

Пример:

let timeout;

element.addEventListener('search', (event) => {
  clearTimeout(timeout);

  timeout = setTimeout(() => {
    console.log(event.detail.value);
  }, 300);
});

Так уменьшается количество обращений к серверу.

Практический пример оптимизированного поиска

const element = document.querySelector('#products');

const choices = new Choices(element, {
  searchEnabled: true,
  searchFloor: 3,
  searchResultLimit: 20,
  shouldSort: false,
  noResultsText: 'Товары не найдены'
});

let timeout;

element.addEventListener('search', (event) => {
  clearTimeout(timeout);

  timeout = setTimeout(async () => {
    const query = event.detail.value;

    if (query.length < 3) {
      return;
    }

    const response = await fetch(`/api/products?q=${query}`);
    const data = await response.json();

    choices.clearChoices();

    choices.setChoices(
      data,
      'id',
      'title',
      true
    );
  }, 400);
});

В примере реализованы:

  • минимальная длина запроса;
  • ограничение результатов;
  • отключение сортировки;
  • debounce;
  • серверная загрузка данных;
  • динамическое обновление списка.
Оглавление