SimpleAutocomplete — различия между версиями
Материал из YourcmcWiki
м |
м |
||
| Строка 6: | Строка 6: | ||
Последнее обновление: {{/updatedate}}. | Последнее обновление: {{/updatedate}}. | ||
| − | Использование | + | == Использование == |
| − | < | + | Сначала включите на страницу [{{SVN|vitaphoto/js/hinter.js}} hinter.js] и [{{SVN|vitaphoto/js/hinter.css}} hinter.css], потом следующий JS-код: |
| + | |||
| + | <code-javascript> | ||
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML); | var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML); | ||
| − | </ | + | </code-javascript> |
Обязательные параметры конструктора: | Обязательные параметры конструктора: | ||
| Строка 17: | Строка 19: | ||
; 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. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки. | ||
| − | Необязательные параметры: | + | Необязательные параметры конструктора: |
; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»). | ; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»). | ||
| Строка 25: | Строка 27: | ||
; allowHTML: Если true, то в названиях опций будет разрешён HTML-код. | ; allowHTML: Если true, то в названиях опций будет разрешён HTML-код. | ||
| − | + | Если в какой-то момент объект SimpleAutocomplet вам станет более не нужен, его можно уничтожить: | |
| + | |||
| + | <code-javascript> | ||
| + | hint.remove(); | ||
| + | hint = null; | ||
| + | </code-javascript> | ||
| + | |||
| + | == Демонстрация == | ||
<html> | <html> | ||
| Строка 40: | Строка 49: | ||
</html> | </html> | ||
| − | FIXME | + | == FIXME == |
* В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место. | * В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место. | ||
Версия 01:19, 14 октября 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-код.
Если в какой-то момент объект SimpleAutocomplet вам станет более не нужен, его можно уничтожить:
hint.remove(); hint = null;
Демонстрация
Обычная подсказка: Мультивыбор:
FIXME
- В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.
