SimpleAutocomplete — различия между версиями
Материал из YourcmcWiki
м (→Демонстрация) |
м |
||
| Строка 26: | Строка 26: | ||
; onChangeListener(hint, index): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода. | ; onChangeListener(hint, index): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода. | ||
; maxHeight: Максимальная высота выпадающего списка в пикселах. | ; maxHeight: Максимальная высота выпадающего списка в пикселах. | ||
| − | ; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив | + | ; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта. |
| − | + | ; promptHTML: HTML-код «приглашения ко вводу», показываемого перед ''непустым'' списком опций. По умолчанию — не задан. | |
| − | ; promptHTML: HTML-код «приглашения ко вводу», показываемого перед | + | |
; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300. | ; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300. | ||
| Строка 41: | Строка 40: | ||
<html> | <html> | ||
| − | Обычная подсказка: <input type="text" id="z" name="z" value="" /> Мультивыбор: <input type="text" id="x" name="x" value="" /> | + | Обычная подсказка: <input type="text" id="z" name="z" value="" /> |
| + | <br /> | ||
| + | Мультивыбор: <input type="text" id="x" name="x" value="" /> | ||
| + | <br /> | ||
| + | Мультивыбор с побочным эффектом: <input type="text" id="y" name="y" value="" /> | ||
<link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" /> | <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" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script> | ||
| Строка 48: | Строка 51: | ||
h.replaceItems([[ 'Вася Пупкин', 'Вася' ], [ 'Миша Метёлкин', 'Миша' ]], m); | h.replaceItems([[ 'Вася Пупкин', 'Вася' ], [ 'Миша Метёлкин', 'Миша' ]], m); | ||
} | } | ||
| + | var sel = {}; | ||
function cb2(h, v, m) { | function cb2(h, v, m) { | ||
| − | + | var i = []; | |
| + | // Отключим Васю, когда Миша отмечен | ||
| + | i.push([ 'Вася Пупкин', 'Вася', sel[1], sel[0] ]); | ||
| + | i.push([ 'Миша Метёлкин', 'Миша', false, sel[1] ]); | ||
| + | h.replaceItems(i); | ||
| + | } | ||
| + | var ya; | ||
| + | function clcb(h, i, item) { | ||
| + | sel[i] = item[3]; | ||
| + | if (i == 1) | ||
| + | ya.changeMultiItem(0, null, sel[1], sel[0]); | ||
} | } | ||
| − | |||
new SimpleAutocomplete('z', cb); | new SimpleAutocomplete('z', cb); | ||
| + | new SimpleAutocomplete('x', cb, { multipleDelimiter: ',', prompt: 'Выберите дядек' }); | ||
| + | ya = new SimpleAutocomplete('y', cb2, { multipleListener: clcb }); | ||
</script> | </script> | ||
</html> | </html> | ||
Версия 20:57, 5 марта 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
- Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта.
- promptHTML
- HTML-код «приглашения ко вводу», показываемого перед непустым списком опций. По умолчанию — не задан.
- delay
- Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300.
Если в какой-то момент объект SimpleAutocomplete вам станет более не нужен, его можно уничтожить:
hint.remove(); hint = null;
Демонстрация
Обычная подсказка:
Мультивыбор:
Мультивыбор с побочным эффектом:
FIXME
- В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.
