SimpleAutocomplete — различия между версиями
Материал из YourcmcWiki
м (→Использование) |
м |
||
| Строка 13: | Строка 13: | ||
<code-javascript> | <code-javascript> | ||
| − | var hint = new SimpleAutocomplete(input, dataLoader, | + | var hint = new SimpleAutocomplete(input, dataLoader, params); |
</code-javascript> | </code-javascript> | ||
| Строка 21: | Строка 21: | ||
; dataLoader(hint, value): Функция, которая должна загрузить опции для подсказки и вызвать <tt>hint.replaceItems([ [ name, value ], [ name, value ], ... ])</tt>. Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки. | ; dataLoader(hint, value): Функция, которая должна загрузить опции для подсказки и вызвать <tt>hint.replaceItems([ [ name, value ], [ name, value ], ... ])</tt>. Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки. | ||
| − | Необязательные параметры конструктора: | + | Необязательные параметры конструктора передаются в объекте <tt>params</tt>: |
; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»). | ; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»). | ||
| Строка 28: | Строка 28: | ||
; emptyText: Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта. | ; emptyText: Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта. | ||
; allowHTML: Если true, то в названиях опций будет разрешён HTML-код. | ; allowHTML: Если true, то в названиях опций будет разрешён HTML-код. | ||
| + | ; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. | ||
| − | Если в какой-то момент объект | + | Если в какой-то момент объект ''SimpleAutocomplete'' вам станет более не нужен, его можно уничтожить: |
<code-javascript> | <code-javascript> | ||
| Строка 46: | Строка 47: | ||
h.replaceItems([[ 'a', 'b' ], [ 'c', 'd' ]]); | h.replaceItems([[ 'a', 'b' ], [ 'c', 'd' ]]); | ||
} | } | ||
| − | new SimpleAutocomplete('x', cb, ','); | + | new SimpleAutocomplete('x', cb, { multipleDelimiter: ',' }); |
new SimpleAutocomplete('z', cb); | new SimpleAutocomplete('z', cb); | ||
</script> | </script> | ||
Версия 18:32, 9 января 2013
Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).
Исходники: hinter.js, hinter.css.
Последнее обновление: 2014-09-04.
Использование
Сначала включите на страницу hinter.js и hinter.css.
Для создания экземпляра SimpleAutocomplete используйте следующий JS-код:
var hint = new SimpleAutocomplete(input, dataLoader, params);
Обязательные параметры конструктора:
- input
- Поле ввода, в которое будем подсказывать, либо DOM-объект, либо его ID. ID, кстати, всегда необходимо.
- dataLoader(hint, value)
- Функция, которая должна загрузить опции для подсказки и вызвать hint.replaceItems([ [ name, value ], [ name, value ], ... ]). Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки.
Необязательные параметры конструктора передаются в объекте params:
- multipleDelimiter
- Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).
- onChangeListener(hint, index)
- Функция, которая будет вызвана при изменении значения через данный автокомплит. index — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.
- maxHeight
- Максимальная высота выпадающего списка в пикселах.
- emptyText
- Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта.
- allowHTML
- Если true, то в названиях опций будет разрешён HTML-код.
- delay
- Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд.
Если в какой-то момент объект SimpleAutocomplete вам станет более не нужен, его можно уничтожить:
hint.remove(); hint = null;
Демонстрация
Обычная подсказка: Мультивыбор:
FIXME
- В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.
