SimpleAutocomplete — различия между версиями

Текущая версия на 13:12, 21 сентября 2017

Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).

• Исходники: hinter.js, hinter.css.
• Минимизированный JS: hinter.min.js
• Последнее обновление: 2014-09-04.
• Лицензия: Mozilla Public License версии 2.0 или более новой.

  В двух словах — «строгий файловый копилефт». Любой отдельный файл, включающий MPL-лицензированные куски кода, должен быть лицензирован под MPL2.0+, GPL2.0+, LGPL2.1+ или AGPL3.0+.

Использование

Сначала включите на страницу hinter.js и hinter.css.

Для создания экземпляра SimpleAutocomplete используйте следующий JS-код:

var hint = new SimpleAutocomplete(input, dataLoader, params);

Обязательные параметры конструктора:

input

Поле ввода, в которое будем подсказывать, либо DOM-объект, либо его ID. ID, кстати, всегда необходимо.

dataLoader(hint, value, more)

Функция, которая должна загрузить опции для подсказки и вызвать hint.replaceItems([ [ name, value ], [ name, value[, disabled[, checked]] ], ... ], more).

• hint — объект автокомплита, на котором и надо вызывать replaceItems.
• value — введённая пользователем строка, на основе которой надо предоставлять подсказки.
• more — при использовании moreMarker «страница» подсказок, которую нужно загрузить (0 = первая страница).

Параметры элементов: [ name, value[, disabled[, checked]] ]

• name — Название
• value — Значение (которое будет подставлено в поле ввода)
• disabled — «Выключена» ли эта опция — если да, то её будет невозможно выбрать
• checked — Отмечен ли изначально флажок этой опции (только при мультивыборе)

Необязательные параметры конструктора передаются в объекте params:

multipleDelimiter

Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).

multipleListener(hint, index, item)

Для «мультивыбора с побочным эффектом» — когда поле ввода хочется использовать только для выбора значений в подсказке, а не для перечисления выбранных значений — можно передать в этот параметр callback, который будет реагировать на клики по элементам и где-то сохранять их статус. index — номер элемента, item = [ name, value, disabled, checked ]. Если задан multipleDelimiter и если callback вернёт true, то кроме вызова multipleListener всё-таки будет также затронуто и значение в поле ввода.

Также в этом режиме обретает смысл указание изначальной отмеченности флажков элементов при загрузке списка: hint.replaceItems([ [ name, value, disabled[, checked] ], ... ], more).

onChangeListener(hint, index, item)

Функция, которая будет вызвана при изменении значения через данный автокомплит. index — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.

maxHeight

Максимальная высота выпадающего списка в пикселах.

emptyText

Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта.

prompt

HTML-код «пояснения», показываемого перед непустым списком опций. По умолчанию — не задан.

delay

Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300.

moreMarker

Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию "#MORE") в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список.

persist

Если true, то список подсказок никогда не скрывается. Это можно использовать для создания интерактивных полей ввода, похожих на обычные мультиселекты (см. пример ниже).

className

Имя CSS-класса для списка подсказок. По умолчанию «hintLayer».

Если в какой-то момент объект SimpleAutocomplete вам станет более не нужен, его можно уничтожить:

hint.remove();
hint = null;

Демонстрация

Обычная подсказка:

Мультивыбор с пояснением:

Мультивыбор с побочным эффектом:

Постоянно видимый мультивыбор: