Здравствуйте, уважаемые читатели 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 }
- lookupFilter — function (suggestion, query, queryLowerCase) {} Функция фильтрации для поиска в массиве. По умолчанию частичное совпадение строк (без учета регистра);
- onSelect — Callback функция, вызывается когда пользователь выбирает значение из предложенного списка;
- minChars — Минимальное количество символов, необходимых для запуска автозаполнения. По умолчанию: 1;
- maxHeight — Максимальная высота контейнера со списком значений, в пикселях. По умолчанию: 300;
- deferRequestBy — Количество миллисекунд задержки AJAX запроса. По умолчанию: 0;
- width — Ширина контейнера со списком значений автозаполнения в пикселях, например: 300. По умолчанию: auto;
- params — Дополнительные параметры, передаваемые с запросом, необязательно.
- formatResult — function (suggestion, currentValue) {} пользовательские функции, необязательно.
- delimiter — Строка или RegExp, который разбивает входное значение. Полезно когда, например, вам нужно заполнить список значений, разделенных запятыми;
- zIndex — свойство css zIndex для контейнера со списком предложений. По умолчанию: 9999;
- type — тип Ajax запроса. По умолчанию: GET;
- noCache — Логическое значение, указывающее, следует ли кэшировать результаты списка предложений. По умолчанию True.
- onSearchStart — function (query) {} вызывается перед запроса AJAX. this связано с input элементом;
- onSearchComplete — function (query) {} вызывается после запроса AJAX. this связано с input элементом;
- tabDisabled — по-умолчанию false. Устанавливает курсор ввода после выбора предложенного значения;
- paramName — по-умолчанию query. Имя параметра запроса, который содержит запрос;
- transformResult — function(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; } |
Источник статьи/урока: https://xozblog.ru