История версий:
| 07.03.18 |
|
| 23.11.14 |
|
| 03.11.14 |
|
| 18.06.14 |
|
| 04.04.14 |
|
Автокомплитер на JavaScript
04.04.2014 02:09
2Select2, конечно, восхитителен, но дюже тяжел, непривычен по дизайну и умеет делать гораздо больше, чем нужно.
Остальные варианты, которые удалось нарыть в просторах интернета, почему-то все поголовно уверены, что элементы автокомплита всегда ищутся по их названию, синонимов, как и каких-либо других полей у них быть не может.
А если у меня города, и я хочу чтобы при вводе слова Питер или Петербург, ну или Petersburg всплывал Saint Petersburg? Нее, не слышал!
А на самом деле это очень распространенная задача, когда за несколькими различными словами скрывается какое-то одно значение.
Опять придется самому делать.
Хотя как всегда - инет большой - может плохо смотрел.
Поскольку я, как и любой программист, ленив - часть CSS и суть работы некоторых блоков взял из мода довольно распространенного автокомплитера отсюда.
Требования к автокомплитеру
- возможность быстрого "прикрепления" на поле ввода
- возможность иметь несколько синонимов одного значения
- возможность сохранять произвольные поля для элемента и обращаться к ним
- возможность работы как с локальным массивом, так и с подгружаемыми данными
Что получилось
Демо
| автокомплитер, использующий массив |
| автокомплитер, использующий подгрузку и обработку событий (подсказка) |
API
Создание
var ac = $ ( селектор текстового поля ).autocompleter( data, options );
| data | URL для загрузки данных либо массив данных | ||||||||||||||||||||||||||||||||||||||||||||
| options | дополнительный настройки:
|
| Формат данных |
[ { text: "название элемента1", pattern: [ "синоним1", "синоним2" ... ] }, { text: "название элемента2", pattern: [ "синоним1", "синоним2" ... ] }, { text: "название элемента3", pattern: [ "синоним1", "синоним2" ... ] } ]
Запрос на данные идет вида POST со строкой в переменной q.
| Функция преобразования входных данных |
function parseData( items ) { ... return items; }
| items | входные данные |
| Функция формирования вида элемента списка |
function formatItem( container, item, itemNumber, items, itemsLen ) { ... return { html: (null или строка или DOM объект), - html / DOM объект данного элемента списка, value: строка, - значение, помещаемое при выборе в поле ввода }; }
| container | DOM объект в котором будет храниться элемент и его данные |
| item | данные элемента |
| itemNumber | порядковый номер элемента в списке |
| items | данные всех элементов |
| itemsLen | количество всех элементов |
Должна возвращать объект с полями:
| html | HTML данного элемента (или null, если не нужно) |
| title | значение title для данного элемента (или null, если не нужно) |
| value | значение, помещающееся в поле ввода при выборе данного элемента |
| Функция обработки событий |
function eventsHandler( event, obj, item, query ) { ... }
| over / out | наведение / снятие наведения с элемента в списке (obj - DOM элемента, item - данные элемента) |
| select | выбор элемента в списке (obj - DOM элемента, item - данные элемента) |
| unselect | отмена выбора элемента (obj - null, item - данные элемента) |
| show / hide | показывание / скрытие списка (obj - DOM списка) |
| beforeRequest | вызывается до того, как пойдет запрос на поиск (obj - options, item - options.extraParams, query - строка запроса) в extraParams будет присутствовать свойство с именем, заданным paramName со значением, равным строке запроса данные в extraParams будут неизменным между запросами (кроме параметра с именем из paramName), если не менялись специально если при обработке этого события функция что-либо вернет, то данное значение будет использовано вместо extraParams |
Методы: получить значение
ac.get();
Выбранный элемент можно получить, обратившись к атрибуту data-selected текстового поля, на которое был установлен автокомплитер.
Методы: установить значение
ac.set( value, item, triggerEvent );
| value | текст внутри контрола |
| item | объект устанавливаемого элемента |
| triggerEvent | true - для генерации событий изменения (может быть опущен, по умолчанию false) |
Если опущены все параметры, контрол просто очищается.
Под "опущено" подразумевается значение undefined или null.
Методы: очистить кэш
ac.clearCache();
Методы: установить параметры запроса
ac.setExtraParams( { parameter1: value, parameter2: value, parameter3: value, ... } );
Методы: показать список
ac.showResults( status, timer );
| status | true - показать / false - спрятать |
| timer | true - показать список со стандартной задержкой |
Данные выбранного элемента DOM
Данные выбранного элемента можно получить, обратившись к атрибуту data-selected текстового поля, на которое был установлен автокомплитер.Данные элемента в списке хранятся в его DOM (li) аттрибуте data-item.
Как обращатся к методам?
Либо так:var ac = $( селектор текстового поля ).autocompleter( ... ) ac.метод(...);
Либо так:
$( селектор текстового поля ).autocompleter().метод(...);
Скачать ac.zip, версия от 07.03.18
Все файлы автокомплитера одним архивом.
скачать
04.04.2014, Protocoder