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

Материал из YourcmcWiki
Перейти к: навигация, поиск
м
м
Строка 6: Строка 6:
 
Последнее обновление: {{/updatedate}}.
 
Последнее обновление: {{/updatedate}}.
  
Использование: сначала включите на страницу [{{SVN|vitaphoto/js/hinter.js}} hinter.js] и [{{SVN|vitaphoto/js/hinter.css}} hinter.css], потом следующий JS-код:
+
== Использование ==
  
<source lang="javascript">
+
Сначала включите на страницу [{{SVN|vitaphoto/js/hinter.js}} hinter.js] и [{{SVN|vitaphoto/js/hinter.css}} hinter.css], потом следующий JS-код:
 +
 
 +
<code-javascript>
 
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);
 
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);
</source>
+
</code-javascript>
  
 
Обязательные параметры конструктора:
 
Обязательные параметры конструктора:
Строка 17: Строка 19:
 
; dataLoader(hint, value): Функция, которая должна загрузить опции для подсказки и вызвать <tt>hint.replaceItems([ [ name, value ], [ name, value ], ... ])</tt>. Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки.
 
; dataLoader(hint, value): Функция, которая должна загрузить опции для подсказки и вызвать <tt>hint.replaceItems([ [ name, value ], [ name, value ], ... ])</tt>. Первый параметр (hint) — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — введённая пользователем строка, на основе которой надо предоставлять подсказки.
  
Необязательные параметры:
+
Необязательные параметры конструктора:
  
 
; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).
 
; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).
Строка 25: Строка 27:
 
; allowHTML: Если true, то в названиях опций будет разрешён HTML-код.
 
; allowHTML: Если true, то в названиях опций будет разрешён HTML-код.
  
Демонстрация:
+
Если в какой-то момент объект SimpleAutocomplet вам станет более не нужен, его можно уничтожить:
 +
 
 +
<code-javascript>
 +
hint.remove();
 +
hint = null;
 +
</code-javascript>
 +
 
 +
== Демонстрация ==
  
 
<html>
 
<html>
Строка 40: Строка 49:
 
</html>
 
</html>
  
FIXME:
+
== FIXME ==
  
 
* В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.
 
* В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.

Версия 01:19, 14 октября 2012

Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).

Исходники: hinter.js, hinter.css.

Последнее обновление: 2014-09-04.

Использование

Сначала включите на страницу hinter.js и hinter.css, потом следующий JS-код:

var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);

Обязательные параметры конструктора:

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, то при отсутствии элементов подсказка будет скрыта.
allowHTML
Если true, то в названиях опций будет разрешён HTML-код.

Если в какой-то момент объект SimpleAutocomplet вам станет более не нужен, его можно уничтожить:

hint.remove();
hint = null;

Демонстрация

Обычная подсказка: Мультивыбор:

FIXME

  • В Firefox слой подсказки не уменьшается меньше минимальной высоты скроллбара из установленного стиля. То есть, скроллбар виден всегда, даже если там только 1 элемент, и бывает так, что элемент один, а под ним пустое место.