Acompleter

Во всех демо-примерах используется один и тот же HTML: один простой текстовый input. Обратите внимание на атрибут autocomplete="off". Если ваш инпут имеет популярное название типа name, city, и т.д., то скорее всего браузер будет помнить ранее введённые значения для таких инпутов.

HTML:


<input type="text" autocomplete="off" />

По-умолчанию подразумевается что данные имеют формат:

[ { value: string, data: any_obj }, ... ]

Я использую список живущих на Земле приматов в качестве value и их примерное количество в качестве data.

DATA (data.json):


[{"value": "Hainan black crested gibbon", "data": "20"},
 {"value": "Eastern black crested gibbon", "data": "35 - 37"},
    ...
 {"value": "Human", "data": "7 000 000 000"}]

Совсем без стилей список выглядит ужасно, так что минимальный CSS необходим.

CSS:


.results { background: #eee; }
.results ul { list-style: none; padding: 0; margin: 0; }
.results ul li.current { background: #ccc; }

Demo #1. Минимум настроек.
Для работы плагину необходим url к файлу с данными.

JS:


$('#demo1 input').acompleter({
	url: "data.json"
});

Demo #2. Данные в ином формате.
Входные данные преобразует функция processData.

JS:


$('#demo2 input').acompleter({
    url: "primates.json",
    processData: function( loadedData ) {
        return $.map( loadedData, function( result ) {
            return {
                value: result.name,
                data: result.population
            };
        });
    },
    buildListItem: function(value, result) {
        return value + '<span class="qty">' + result.data + "</span>";
    }
});

Demo #3. Сортировка.
sortResult включает сортировку. sortFunction задаёт функцию сортировки.

JS:


$('#demo3 input').acompleter({
    url: "data.json",
    sortResults: true,
    sortFunction: function(a, b) {
        var parse = function(x) { return parseInt(x.data.replace(/\s/g, ""), 10); };
        return parse(b) - parse(a);
    },
    buildListItem: function(value, result) {
        return value + '<span class="qty">' + result.data + "</span>";
    }
});

настройки

delay: 400; Задержка после нажатия клавиши перед тем как начать поиск
remoteDataType: "json"; Формат в котором сервер будет отдавать данные. Сейчас поддерживается только json. Любые другие форматы обрабатываются как текстовые данные
loadingClass: "loading"; Название класса, который будет присвоен инпуту во время загрузки данных
onItemSelect: null; Эта функция вызывается при выборе элемента из списка
resultsClass: "results"; Название класса, который будет присвоен списку с результатами поиска
resultsId: pluginName + "-results-" // + uid; Указывает префикс для id элемента, содежращего список с результатами поиска
currentClass: "current"; Название класса, который будет присвоен выбранному элементу в списке
onError: null; Эта функция вызывается при возникновении ошибки в процессе получения данных
listLength: 10; Количество элементов в списке
minChars: 0; Минимальное количество символов которое пользователь должен набрать, прежде чем начнётся поиск
matchInside: true; Искать ли введённую подстроку внутри слов
matchCase: false; Учитывать ли регистр при поиске
filter: null; Эта функция вызывается для фильтрации локальных данных. Если указать значение false, то фильтрация происходить не будет
sortResults: false; Сортировать ли результаты поиска
sortFunction: null; Эта функция вызывается для сортировки результатов поиска
lineSeparator: '\n'; Разделитель строк в текстовых данных (если тип данных отличный от json)
cellSeparator: '|'; Разделитель колонок в текстовых данных (если тип данных отличный от json)
processData: null; Эта функция вызывается после загрузки и парсинга данных
buildListItem: null; Эта функция вызывается чтоб сформировать HTML для элемента списка
animation: true; Включить ли анимацию
animationSpeed: 177; Скорость анимации при изменении списка
highlight: true; Выделять ли найденную подстроку в результатах поиска. Может быть функцией, которая генерит HTML для элемента списка
displayValue: null; Эта функция вызывается чтоб сформировать значение выбранного элемента которое будет вставлено в инпут
selectOnTab: true; Выбирать ли элементы из списка клавишей Tab
useCache: true; Использовать ли кеш
queryParamName: "q"; Название параметра url, который будет использоваться для передачи поискового запроса. Если указано false, то поисковый запрос будет прибавлен в конец url
extraParams: {}; Дополнительные параметры для передачи на url при поиске
makeUrl: null; Эта функция вызывается для формирования url поискового запроса
getComparableValue: function( result ) { return result.value; }; Эта функция возвращает значение по которому плагин может сравнивать элементы друг с другом

¶ Во всех демо-примерах используется один и тот же HTML: один простой текстовый input. Обратите внимание на атрибут `autocomplete="off"`. Если ваш инпут имеет популярное название типа `name`, `city`, и т.д., то скорее всего браузер будет помнить ранее введённые значения для таких инпутов.	HTML: `<input type="text" autocomplete="off" />`
¶ По-умолчанию подразумевается что данные имеют формат: `[ { value: string, data: any_obj }, ... ]` Я использую список живущих на Земле приматов в качестве `value` и их примерное количество в качестве `data`.	DATA (data.json): `[{"value": "Hainan black crested gibbon", "data": "20"}, {"value": "Eastern black crested gibbon", "data": "35 - 37"}, ... {"value": "Human", "data": "7 000 000 000"}]`
¶ Совсем без стилей список выглядит ужасно, так что минимальный CSS необходим.	CSS: `.results { background: #eee; } .results ul { list-style: none; padding: 0; margin: 0; } .results ul li.current { background: #ccc; }`
¶ Demo #1. Минимум настроек. Для работы плагину необходим url к файлу с данными.	JS: `$('#demo1 input').acompleter({ url: "data.json" });`
¶ Demo #2. Данные в ином формате. Входные данные преобразует функция `processData`.	JS: `$('#demo2 input').acompleter({ url: "primates.json", processData: function( loadedData ) { return $.map( loadedData, function( result ) { return { value: result.name, data: result.population }; }); }, buildListItem: function(value, result) { return value + '<span class="qty">' + result.data + "</span>"; } });`
¶ Demo #3. Сортировка. `sortResult` включает сортировку. `sortFunction` задаёт функцию сортировки.	JS: `$('#demo3 input').acompleter({ url: "data.json", sortResults: true, sortFunction: function(a, b) { var parse = function(x) { return parseInt(x.data.replace(/\s/g, ""), 10); }; return parse(b) - parse(a); }, buildListItem: function(value, result) { return value + '<span class="qty">' + result.data + "</span>"; } });`
¶ настройки delay 400 Задержка после нажатия клавиши перед тем как начать поиск remoteDataType "json" Формат в котором сервер будет отдавать данные. Сейчас поддерживается только json. Любые другие форматы обрабатываются как текстовые данные loadingClass "loading" Название класса, который будет присвоен инпуту во время загрузки данных onItemSelect null Эта функция вызывается при выборе элемента из списка resultsClass "results" Название класса, который будет присвоен списку с результатами поиска resultsId pluginName + "-results-" // + uid Указывает префикс для id элемента, содежращего список с результатами поиска currentClass "current" Название класса, который будет присвоен выбранному элементу в списке onError null Эта функция вызывается при возникновении ошибки в процессе получения данных listLength 10 Количество элементов в списке minChars 0 Минимальное количество символов которое пользователь должен набрать, прежде чем начнётся поиск matchInside true Искать ли введённую подстроку внутри слов matchCase false Учитывать ли регистр при поиске filter null Эта функция вызывается для фильтрации локальных данных. Если указать значение `false`, то фильтрация происходить не будет sortResults false Сортировать ли результаты поиска sortFunction null Эта функция вызывается для сортировки результатов поиска lineSeparator '\n' Разделитель строк в текстовых данных (если тип данных отличный от json) cellSeparator '\|' Разделитель колонок в текстовых данных (если тип данных отличный от json) processData null Эта функция вызывается после загрузки и парсинга данных buildListItem null Эта функция вызывается чтоб сформировать HTML для элемента списка animation true Включить ли анимацию animationSpeed 177 Скорость анимации при изменении списка highlight true Выделять ли найденную подстроку в результатах поиска. Может быть функцией, которая генерит HTML для элемента списка displayValue null Эта функция вызывается чтоб сформировать значение выбранного элемента которое будет вставлено в инпут selectOnTab true Выбирать ли элементы из списка клавишей Tab useCache true Использовать ли кеш queryParamName "q" Название параметра url, который будет использоваться для передачи поискового запроса. Если указано `false`, то поисковый запрос будет прибавлен в конец url extraParams {} Дополнительные параметры для передачи на url при поиске makeUrl null Эта функция вызывается для формирования url поискового запроса getComparableValue function( result ) { return result.value; } Эта функция возвращает значение по которому плагин может сравнивать элементы друг с другом