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

Версия 14:30, 16 февраля 2012

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

Исходники: hinter.js, hinter.css.

Последнее обновление: 2014-09-04.

Использование: сначала включите на страницу hinter.js и hinter.css, потом следующий JS-код:

var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);

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

input

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

dataLoader(hint, value)

Функция, которая должна загрузить опции для подсказки и вызвать hint.replaceItems([ [ name, value ], [ name, value ], ... ]). Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки.

Необязательные параметры:

multipleDelimiter

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

onChangeListener(hint, index)

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

maxHeight

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

emptyText

Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта.

allowHTML

Если true, то в названиях опций будет разрешён HTML-код.

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

Обычная подсказка: Мультивыбор:

FIXME:

• В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.