SimpleAutocomplete — различия между версиями
Материал из YourcmcWiki
м |
м |
||
| Строка 21: | Строка 21: | ||
; maxHeight: Максимальная высота выпадающего списка в пикселах. | ; maxHeight: Максимальная высота выпадающего списка в пикселах. | ||
; emptyText: Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта. | ; emptyText: Текст, который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта. | ||
| + | |||
| + | Демонстрация: | ||
| + | |||
| + | <html> | ||
| + | Обычная подсказка: <input type="text" id="z" name="z" value="" /> Мультивыбор: <input type="text" id="x" name="x" value="" /> | ||
| + | <link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" /> | ||
| + | <script language="JavaScript" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script> | ||
| + | <script language="JavaScript"> | ||
| + | function cb(h, v) { | ||
| + | h.replaceItems([[ 'a', 'b' ], [ 'c', 'd' ]]); | ||
| + | } | ||
| + | new SimpleAutocomplete('x', cb, ','); | ||
| + | new SimpleAutocomplete('z', cb); | ||
| + | </script> | ||
| + | </html> | ||
Версия 20:22, 9 ноября 2011
Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживают мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).
Исходники: hinter.js, hinter.css.
Использование: сначала включите на страницу hinter.js и hinter.css, потом следующий JS-код:
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText);
Обязательные параметры конструктора:
- 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, то при отсутствии элементов подсказка будет скрыта.
Демонстрация:
Обычная подсказка: Мультивыбор:
