Изменения

Перейти к: навигация, поиск

SimpleAutocomplete

466 байтов добавлено, 10:12, 21 сентября 2017
м
Нет описания правки
[[Category:Техактивы]][[en:SimpleAutocomplete/en]]
Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).
; 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>.
; onChangeListener(hint, index, item): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.
; maxHeight: Максимальная высота выпадающего списка в пикселах.
; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта.
; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300.
; moreMarker: Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию <tt><nowiki>"#MORE"</nowiki></tt>) в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список.
; persist: Если true, то список подсказок никогда не скрывается. Это можно использовать для создания интерактивных полей ввода, похожих на обычные мультиселекты (см. пример ниже).
; className: Имя CSS-класса для списка подсказок. По умолчанию «hintLayer».
Если в какой-то момент объект ''SimpleAutocomplete'' вам станет более не нужен, его можно уничтожить:
.hintPersist {
height: 200px;
font-size: 7585%;
overflow-y: scroll;
}
<script language="JavaScript" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script>
<script language="JavaScript">
<!--
function cb(h, v, m) {
h.replaceItems([, [ 'Вася Пупкин', 'Вася' ], [ 'Миша Метёлкин', 'Миша' ], [ 'НекроПедоЗоофил', 'x', 1 ] ], m);
}
var sel = {};
h.replaceItems(i);
}
var ya;
function clcb(h, i, item) {
sel[i] = item[3];
new SimpleAutocomplete('z', cb);
new SimpleAutocomplete('x', cb, { multipleDelimiter: ',', prompt: 'Выберите дядек' });
ya = new SimpleAutocomplete('y', cb2, { multipleListener: clcb });
var users = [
for (var i = 0; i < users.length; i++)
{
if (!sel3[users[i][0]]) if (v.length && ) if (users[i][0].toLowerCase().indexOf(v.toLowerCase()) >= 0 || users[i][1].toLowerCase().indexOf(v.toLowerCase()) >= 0) && !sel3[users[i][0]])
{
items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
for (var i = 0; i < users.length; i++)
{
if (selsel3[users[i][0]])
{
items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
sel3[item[1]] = item[3];
}
new SimpleAutocomplete('zms', cb3, {
multipleListener: clcb3,
persist: true,
emptyText: '<center style="color: gray">пользователи не выбраны<br /><i>начните вводить имя пользователя</i></center>'
});
-->
</script>
</html>

Навигация