13 521
правка
Изменения
м
Нет описания правки
[[Category:Техактивы]][[en:SimpleAutocomplete/en]]Простое автодополнение (autocomplete) в текстовых полях ввода. Поддерживают Поддерживает мультивыбор и управление с клавиатуры (вниз, вверх, enter = выбор).
* Исходники: [{{SVN|vitaphoto/js/hinter.js}} hinter.js], [{{SVN|vitaphoto/js/hinter.jscss}} hinter.css].* Минимизированный JS: [{{SVN|vitaphoto/js/hinter.min.js|co}} hinter.min.js]* Последнее обновление: {{/updatedate}}.* Лицензия: [http://www.mozilla.org/MPL/2.0/ Mozilla Public License версии 2.0] или более новой.*: В двух словах — «строгий файловый копилефт». Любой отдельный файл, включающий MPL-лицензированные куски кода, должен быть лицензирован под MPL2.0+, GPL2.0+, LGPL2.1+ или AGPL3.0+.
== Использование: сначала включите на страницу [{{SVN|vitaphoto/js/hinter.js}} hinter.js] и [{{SVN|vitaphoto/js/hinter.js}} hinter.css], потом следующий JS-код:==
Сначала включите на страницу [{{SVN|vitaphoto/js/hinter.js}} hinter.js] и [{{SVN|vitaphoto/js/hinter.css}} hinter.css]. Для создания экземпляра <source lang="tt>SimpleAutocomplete</tt> используйте следующий JS-код: <code-javascript">var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyTextparams);</sourcecode-javascript>
Обязательные параметры конструктора:
; input: Поле ввода, в которое будем подсказывать, либо DOM-объект, либо его ID. ID, кстати, всегда необходимо.
; dataLoader(hint, value, more): Функция, которая должна загрузить опции для подсказки и вызвать <tt>hint.replaceItems([ [ name, value ], [ name, value [, disabled[, checked]] ], ... ], more)</tt>. Первый параметр (hint) — :* hint — объект автокомплита, на котором и надо вызывать replaceItems. Второй параметр — :* value — введённая пользователем строка, на основе которой надо предоставлять подсказки.:* more — при использовании moreMarker «страница» подсказок, которую нужно загрузить (0 = первая страница).:: Параметры элементов: [ name, value[, disabled[, checked]] ]::* name — Название::* value — Значение (которое будет подставлено в поле ввода)::* disabled — «Выключена» ли эта опция — если да, то её будет невозможно выбрать::* checked — Отмечен ли изначально флажок этой опции (только при мультивыборе)
Необязательные параметрыконструктора передаются в объекте <tt>params</tt>:
; multipleDelimiter: Чтобы включить мультивыбор, передайте сюда разделитель (например ',' или ';'), который не может входить в выбираемые значения. Также они не могут включать пробелы в начале и конце. Значение поля ввода будет установлено равным значениям всех выбранных элементов, соединённым через данный разделитель и один пробел (например «a, b»).
; 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 вернёт пустой массив. По умолчанию «No items found». Если пуст или false(по умолчанию), то при отсутствии элементов подсказка будет скрыта.; prompt: HTML-код «пояснения», показываемого перед ''непустым'' списком опций. По умолчанию — не задан.; delay: Если установить в ненулевое целочисленное значение, то подсказки будут подгружаться с сервера не чаще, чем раз в delay миллисекунд. По умолчанию 300.; moreMarker: Если выведенный список подсказок ограничен, но пользователю хочется всё-таки иметь возможность просмотреть их все без ввода дополнительных символов, вы можете добавить в список элемент со специальным значением, равным moreMarker (по умолчанию <tt><nowiki>"#MORE"</nowiki></tt>) в конце списка, обработать параметр more в dataLoader’е (см. выше) и подгрузить дополнительные значения в список.; persist: Если true, то список подсказок никогда не скрывается. Это можно использовать для создания интерактивных полей ввода, похожих на обычные мультиселекты (см. пример ниже).; className: Имя CSS-класса для списка подсказок. По умолчанию «hintLayer». Если в какой-то момент объект ''SimpleAutocomplete'' вам станет более не нужен, его можно уничтожить: <code-javascript>hint.remove();hint = null;</code-javascript> == Демонстрация == <html><p>Обычная подсказка: <input type="text" id="z" name="z" value="" /></p><p>Мультивыбор с пояснением: <input type="text" id="x" name="x" value="" /></p><p>Мультивыбор с побочным эффектом: <input type="text" id="y" name="y" value="" /></p><p>Постоянно видимый мультивыбор:</p><div class="wrapPersist"><input class="inputPersist" type="text" id="ms" value="" size="40" /></div><div style="clear: both"></div><link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" /><style>.wrapPersist { border-radius: 5px; border: 1px solid rgb(82, 168, 236); float: left; -webkit-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);}.wrapPersist .inputPersist { margin: 5px; border-width: 0 0 1px 0; border-bottom-style: solid; border-bottom-color: rgb(82, 168, 236);}.wrapPersist .hintActiveItem { background: #7db9e8; /* Old browsers */ background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 83%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(83%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */}.email { color: gray; }.wrapPersist .hintActiveItem .email { color: #e0e0e0; }.hintPersist { height: 200px; font-size: 85%; overflow-y: scroll;}</style><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 = {};function cb2(h, v) { var i = []; // Отключим Васю, когда Миша отмечен i.push([ 'Вася Пупкин'+(sel[1] ? ' выключен' : ''), 'Вася', sel[1], sel[0] ]); i.push([ 'Миша Метёлкин', 'Миша', false, sel[1] ]); h.replaceItems(i);}function clcb(h, i, item) { sel[i] = item[3]; if (i == 1) cb2(h, h.input.value);}new SimpleAutocomplete('z', cb);new SimpleAutocomplete('x', cb, { multipleDelimiter: ',', prompt: 'Выберите дядек' });new SimpleAutocomplete('y', cb2, { multipleListener: clcb }); var users = [ [ 'vasya@oymorozmoroz.ru', 'Вася Пупкин' ], [ 'misha@oymorozmoroz.ru', 'Миша Метёлкин' ], [ 'alisa@oymorozmoroz.ru', 'Алиса Амосова' ], [ 'zoya@oymorozmoroz.ru', 'Зоя Зотова' ], [ 'pavel@oymorozmoroz.ru', 'Паша Косолапов' ]];var sel3 = { 'vasya@oymorozmoroz.ru': 1 };function cb3(h, v){ var items = []; 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) { 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 (sel3[users[i][0]]) { items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]); } } h.replaceItems(items);}function clcb3(h, i, item){ 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></html>