Автозаполнение полей формы (плагин jQuery-Autocomplete)

Здравствуйте, уважаемые читатели XoZbloga! Представляю Вам очередную статью в рубрике «Плагины». Рассмотрим плагин jQuery-Autocomplete, с помощью которого легко создать автозаполнение текстовых полей формы. Работает только на jQuery, для хранение значений автозаполнения можно использовать текстовый файл.



Автозаполнение полей формы

HTML разметка

У поля к которому следуют прикрепить автозаполнение, должен быть атрибут id, именно по нему будет идти привязка:

1
<input type="text" name="country" id="autocomplete" />

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

Теперь вызываем метод .autocomplete:

1
2
3
4
5
6
$('#autocomplete').autocomplete({
    lookup: countriesArray,
    onSelect: function (suggestion) {
        $('#suggestions-container').html('Вы выбрали: ' + suggestion.value + ', сокращение ' + suggestion.data);
    }
});

В приведенном примере метод .autocomplete вызывается с 2мя параметрами, lookup где
countriesArray — это массив со странами, о нем и как он формируется немного ниже, а также onSelect — функция обратного вызова при выборе элемента из предложенного списка.

Параметры

  • serviceUrl — путь до файла с значениями.
  • lookup — массив значений. Это может быть массив строк или:
    • suggestion — литерал объекта в формате { value: ‘string’, data: any }
  • lookupFilterfunction (suggestion, query, queryLowerCase) {} Функция фильтрации для поиска в массиве. По умолчанию частичное совпадение строк (без учета регистра);
  • onSelect — Callback функция, вызывается когда пользователь выбирает значение из предложенного списка;
  • minChars — Минимальное количество символов, необходимых для запуска автозаполнения. По умолчанию: 1;
  • maxHeight — Максимальная высота контейнера со списком значений, в пикселях. По умолчанию: 300;
  • deferRequestBy — Количество миллисекунд задержки AJAX запроса. По умолчанию: 0;
  • width — Ширина контейнера со списком значений автозаполнения в пикселях, например: 300. По умолчанию: auto;
  • params — Дополнительные параметры, передаваемые с запросом, необязательно.
  • formatResultfunction (suggestion, currentValue) {} пользовательские функции, необязательно.
  • delimiter — Строка или RegExp, который разбивает входное значение. Полезно когда, например, вам нужно заполнить список значений, разделенных запятыми;
  • zIndex — свойство css zIndex для контейнера со списком предложений. По умолчанию: 9999;
  • type — тип Ajax запроса. По умолчанию: GET;
  • noCache — Логическое значение, указывающее, следует ли кэшировать результаты списка предложений. По умолчанию True.
  • onSearchStartfunction (query) {} вызывается перед запроса AJAX. this связано с input элементом;
  • onSearchCompletefunction (query) {} вызывается после запроса AJAX. this связано с input элементом;
  • tabDisabled — по-умолчанию false. Устанавливает курсор ввода после выбора предложенного значения;
  • paramName — по-умолчанию query. Имя параметра запроса, который содержит запрос;
  • transformResultfunction(response) {} Вызывается после того, как станет готов результат запроса. Преобразует результат в response.suggestions формат;
  • autoSelectFirst — если установлено true, первый пункт будет подсвечен при показе списка предложений. Значение по-умолчанию false;
  • appendTo — контейнер, в который будет добавлен список предложений. По-умолчанию body. Может быть JQuery объект, селектор или HTML элемент. Убедитесь в том, чтобы было установлено position: absolute или position: relative для этого элемента.

Массив со списком значений выбора

Теперь о массиве со списком значений выбора. Как писалось в начале это также может быть отдельный текстовый файл, с соответствующей структурой. Вот так выглядит массив:

1
2
3
4
5
var countriesArray = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];

Сам автор предлагает вот такой способ использования внешнего файла:

1
2
3
4
5
6
7
// Подгружаем страны из текстового файла:
$.ajax({
    url: 'content/countries.txt',
    dataType: 'json'
}).done(function (source) {

var countriesArray = $.map(source, function (value, key) { return { value: value, data: key }; });

Где с помощью метода $.map переводим все элементы массива из файла в новый массив со значениями.

Оформление

Структура списка предложений выглядит так:

1
2
3
4
5
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion autocomplete-selected">...</div>
    <div class="autocomplete-suggestion">...</div>
    <div class="autocomplete-suggestion">...</div>
</div>

И применяется простое оформление:

1
2
3
4
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!