SimpleAutocomplete — различия между версиями
Материал из YourcmcWiki
м |
|||
| (не показано 7 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
| − | [[en:SimpleAutocomplete/en]] | + | [[Category:Техактивы]][[en:SimpleAutocomplete/en]] |
Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор). | Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор). | ||
| Строка 36: | Строка 36: | ||
; multipleListener(hint, index, item): Для «мультивыбора с побочным эффектом» — когда поле ввода хочется использовать только для выбора значений в подсказке, а не для перечисления выбранных значений — можно передать в этот параметр callback, который будет реагировать на клики по элементам и где-то сохранять их статус. <tt>index</tt> — номер элемента, <tt>item = [ name, value, disabled, checked ]</tt>. Если задан multipleDelimiter и если callback вернёт true, то кроме вызова multipleListener всё-таки будет также затронуто и значение в поле ввода. | ; multipleListener(hint, index, item): Для «мультивыбора с побочным эффектом» — когда поле ввода хочется использовать только для выбора значений в подсказке, а не для перечисления выбранных значений — можно передать в этот параметр callback, который будет реагировать на клики по элементам и где-то сохранять их статус. <tt>index</tt> — номер элемента, <tt>item = [ name, value, disabled, checked ]</tt>. Если задан multipleDelimiter и если callback вернёт true, то кроме вызова multipleListener всё-таки будет также затронуто и значение в поле ввода. | ||
: Также в этом режиме обретает смысл указание изначальной отмеченности флажков элементов при загрузке списка: <tt>hint.replaceItems([ [ name, value, disabled[, checked] ], ... ], more)</tt>. | : Также в этом режиме обретает смысл указание изначальной отмеченности флажков элементов при загрузке списка: <tt>hint.replaceItems([ [ name, value, disabled[, checked] ], ... ], more)</tt>. | ||
| − | ; onChangeListener(hint, index): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода. | + | ; onChangeListener(hint, index, item): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода. |
; maxHeight: Максимальная высота выпадающего списка в пикселах. | ; maxHeight: Максимальная высота выпадающего списка в пикселах. | ||
; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта. | ; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта. | ||
| Строка 42: | Строка 42: | ||
; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300. | ; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300. | ||
; moreMarker: Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию <tt><nowiki>"#MORE"</nowiki></tt>) в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список. | ; moreMarker: Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию <tt><nowiki>"#MORE"</nowiki></tt>) в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список. | ||
| + | ; persist: Если true, то список подсказок никогда не скрывается. Это можно использовать для создания интерактивных полей ввода, похожих на обычные мультиселекты (см. пример ниже). | ||
| + | ; className: Имя CSS-класса для списка подсказок. По умолчанию «hintLayer». | ||
Если в какой-то момент объект ''SimpleAutocomplete'' вам станет более не нужен, его можно уничтожить: | Если в какой-то момент объект ''SimpleAutocomplete'' вам станет более не нужен, его можно уничтожить: | ||
| Строка 91: | Строка 93: | ||
.hintPersist { | .hintPersist { | ||
height: 200px; | height: 200px; | ||
| − | font-size: | + | font-size: 85%; |
overflow-y: scroll; | overflow-y: scroll; | ||
} | } | ||
| Строка 99: | Строка 101: | ||
<!-- | <!-- | ||
function cb(h, v, m) { | function cb(h, v, m) { | ||
| − | h.replaceItems([ | + | h.replaceItems([[ 'Вася Пупкин', 'Вася' ], [ 'Миша Метёлкин', 'Миша' ], [ 'НекроПедоЗоофил', 'x', 1 ] ], m); |
} | } | ||
var sel = {}; | var sel = {}; | ||
| Строка 139: | Строка 141: | ||
for (var i = 0; i < users.length; i++) | for (var i = 0; i < users.length; i++) | ||
{ | { | ||
| − | if ( | + | if (sel3[users[i][0]]) |
{ | { | ||
items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]); | items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]); | ||
| Строка 150: | Строка 152: | ||
sel3[item[1]] = item[3]; | sel3[item[1]] = item[3]; | ||
} | } | ||
| + | new SimpleAutocomplete('ms', cb3, { | ||
| + | multipleListener: clcb3, | ||
| + | persist: true, | ||
| + | className: 'hintPersist', | ||
| + | prompt: '<center style="color: gray">начните вводить имя пользователя</center>', | ||
| + | emptyText: '<center style="color: gray">пользователи не выбраны<br /><i>начните вводить имя пользователя</i></center>' | ||
| + | }); | ||
--> | --> | ||
</script> | </script> | ||
</html> | </html> | ||
Текущая версия на 13:12, 21 сентября 2017
Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).
- Исходники: hinter.js, hinter.css.
- Минимизированный JS: hinter.min.js
- Последнее обновление: 2014-09-04.
- Лицензия: Mozilla Public License версии 2.0 или более новой.
- В двух словах — «строгий файловый копилефт». Любой отдельный файл, включающий MPL-лицензированные куски кода, должен быть лицензирован под MPL2.0+, GPL2.0+, LGPL2.1+ или AGPL3.0+.
Использование
Сначала включите на страницу hinter.js и hinter.css.
Для создания экземпляра SimpleAutocomplete используйте следующий JS-код:
var hint = new SimpleAutocomplete(input, dataLoader, params);
Обязательные параметры конструктора:
- input
- Поле ввода, в которое будем подсказывать, либо DOM-объект, либо его ID. ID, кстати, всегда необходимо.
- dataLoader(hint, value, more)
- Функция, которая должна загрузить опции для подсказки и вызвать hint.replaceItems([ [ name, value ], [ name, value[, disabled[, checked]] ], ... ], more).
- hint — объект автокомплита, на котором и надо вызывать replaceItems.
- value — введённая пользователем строка, на основе которой надо предоставлять подсказки.
- more — при использовании moreMarker «страница» подсказок, которую нужно загрузить (0 = первая страница).
- Параметры элементов: [ name, value[, disabled[, checked]] ]
- name — Название
- value — Значение (которое будет подставлено в поле ввода)
- disabled — «Выключена» ли эта опция — если да, то её будет невозможно выбрать
- checked — Отмечен ли изначально флажок этой опции (только при мультивыборе)
Необязательные параметры конструктора передаются в объекте params:
- multipleDelimiter
- Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).
- multipleListener(hint, index, item)
- Для «мультивыбора с побочным эффектом» — когда поле ввода хочется использовать только для выбора значений в подсказке, а не для перечисления выбранных значений — можно передать в этот параметр callback, который будет реагировать на клики по элементам и где-то сохранять их статус. index — номер элемента, item = [ name, value, disabled, checked ]. Если задан multipleDelimiter и если callback вернёт true, то кроме вызова multipleListener всё-таки будет также затронуто и значение в поле ввода.
- Также в этом режиме обретает смысл указание изначальной отмеченности флажков элементов при загрузке списка: hint.replaceItems([ [ name, value, disabled[, checked] ], ... ], more).
- onChangeListener(hint, index, item)
- Функция, которая будет вызвана при изменении значения через данный автокомплит. index — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.
- maxHeight
- Максимальная высота выпадающего списка в пикселах.
- emptyText
- Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта.
- prompt
- HTML-код «пояснения», показываемого перед непустым списком опций. По умолчанию — не задан.
- delay
- Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300.
- moreMarker
- Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию "#MORE") в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список.
- persist
- Если true, то список подсказок никогда не скрывается. Это можно использовать для создания интерактивных полей ввода, похожих на обычные мультиселекты (см. пример ниже).
- className
- Имя CSS-класса для списка подсказок. По умолчанию «hintLayer».
Если в какой-то момент объект SimpleAutocomplete вам станет более не нужен, его можно уничтожить:
hint.remove(); hint = null;
Демонстрация
Обычная подсказка:
Мультивыбор с пояснением:
Мультивыбор с побочным эффектом:
Постоянно видимый мультивыбор:
