SimpleAutocomplete — различия между версиями

Материал из YourcmcWiki
Перейти к: навигация, поиск
м (Демонстрация)
м
Строка 26: Строка 26:
 
; onChangeListener(hint, index): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.
 
; onChangeListener(hint, index): Функция, которая будет вызвана при изменении значения через данный автокомплит. <tt>index</tt> — номер элемента, выделение которого изменилось. Её нужно использовать вместо обычного события «onchange» на поле ввода.
 
; maxHeight: Максимальная высота выпадающего списка в пикселах.
 
; maxHeight: Максимальная высота выпадающего списка в пикселах.
; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. По умолчанию «No items found». Если false, то при отсутствии элементов подсказка будет скрыта.
+
; emptyText: Текст (HTML-код), который нужно показать, если dataLoader вернёт пустой массив. Если пуст или false (по умолчанию), то при отсутствии элементов подсказка будет скрыта.
; allowHTML: Если true, то в названиях опций будет разрешён HTML-код.
+
; 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) {
     h.replaceItems([[ 'Вася Пупкин', 'Вася' ], [ 'Миша Метёлкин', 'Миша' ], [ 'Элементы можно и отключать', 'Отключенный', true ]], 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('x', cb2, { multipleDelimiter: ',', prompt: 'Выберите дядек' });
 
 
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 элемент, и бывает так, что элемент один, а под ним пустое место.