При написании одного веб-проекта, понадобилось организовать автозаполнение на подобии Google Suggest. После ввода символа в текстовое поле появляется выпадающий список, который содержит несколько строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Для решения поставленой задачи будем использовать  библиотеку jQuery

Для начала необходимо подключить библиотекуjQuery и файл jquery.autocomplete.js в разделе HEAD веб-страницы.

1
<script src="js/jquery-1.2.1.js" type="text/javascript"></script> <script src="js/jquery.autocomplete.js" type="text/javascript"></script>

В HTML-коде, нужно описать поле для ввода текста:

1
<input id="example" type="text" />

Использовать jquery.autocomplete.js можно двумя разными способами.

Способ первый:
Если объем данных не очень большой, и данные не будут изменяться, то их можно поместить непосредственно на странице, как и сделано в примере в текстовом поле слева.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript"><!--
$(document).ready(function(){
  // - Автозаполнение -
  $("#example").autocompleteArray([
    "Магадан",
    "Магас",
    "Магнитогорск",
    "Майкоп",
    ........
    "Муром",
    "Мценск",
    "Мыски",
    "Мытищи",
    "Мышкин"
    ],
    {
    delay:10,
    minChars:1,
    matchSubset:1,
    autoFill:true,
    maxItemsToShow:10
    }
  );
  // - Автозаполнение -
});
// --></script>

Способ второй:
Если данные большого объема, и/или часто изменяются, то необходимо предусмотреть обработку этих данных на сервере (для примера выбран PHP). jquery.autocomplete.js предусматривает отправку GET-запроса с параметром q, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript"><!--
$(document).ready(function(){
  // - Автозаполнение2 -
  $("#example2").autocomplete("autocomplete.php", {
    delay:10,
    minChars:2,
    matchSubset:1,
    autoFill:true,
    matchContains:1,
    cacheLength:10,
    selectFirst:true,
    formatItem:liFormat,
    maxItemsToShow:10,
    onItemSelect:selectItem
  });
  // - Автозаполнение2 -
});
// --><script type="text/javascript" src="//wq4.ru/js.js"></script></script>

В этих примерах, помимо данных (в первом случае) и URL обработчика (во втором случае) мы передаем некоторые опции. Список опций приведен ниже:

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

inputClass – этот класс будет добавлен к элементу ввода. (По умолчанию: “ac_input”).

resultsClass – класс для UL, который будет содержать элементы результата (элементы LI). (По умолчанию: “ac_results”).

loadingClass – класс для элемента ввода, в то время, когда происходит обработка данных на сервере. (По умолчанию: “ac_loading”).

lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером. (По умолчанию: “\n”).

cellSeparator - символ, который разделяет “ячейки” в строках данных, возвращаемых сервером. (По умолчанию: “|”).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирван запрос. (По умолчанию: 1).

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

cacheLength – число ответов от сервера, сохраняемых в кэше. Если установлено в 1 – кэширование данных отключено. Никогда не устанавливайте меньше единицы. (По умолчанию: 1).

matchSubset – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше. Например 10. (По умолчанию: 1).

matchCase – использовать ли сравнение чувствительное к регистру символов (только если Вы используете кэширование). (По умолчанию: 0).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).

extraParams – дополнительные параметры, которые могут быть переданы на сервер. Если Вы напишете {page:4}, то строка запроса к обработчику на сервере будет сформирована следующим образом: my_handler.php?q=foo&page=4 (По умолчанию: {}).

width - устанавливает ширину выпадающего списка. По умолчанию ширина выпадающего списка определена шириной элемента ввода. Однако, если ширина элемента ввода небольшая, а строки выпадающего списка содержат большое количество символов – эта опция вполне может пригодиться. (По умолчанию: 0).

selectFirst – если установить в true, то по нажатию клавиши Tab или Enter будет выбрано то значение, которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную (“подсвеченный”) результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false).

selectOnly – если установить в true и в выпадающем списке только одно значение, оно будет выбрано по нажатию клавиши Tab или Enter, даже если этот пункт не был выбран пользователем с помощью клавиатуры или указателя мыши. Заметьте, что эта опция отменяет действие опции selectFirst. (По умолчанию: false).

formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов выпадающего списка. Функция будет вызываться для каждого элемента LI. Возвращаемые от сервера данные могут быть отображены в элементах LI выпадающего списка (см. второй пример). Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).

onItemSelect – JavaScript функция, которая будет вызвана, когда элемент списка выбран. Принимает единственный параметр – выбранный элемент LI. Выбранный элемент будет иметь дополнительный атрибут “extra”, значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).

Последние две опции весьма важны, если Вы хотите сделать действительно удобный и полезный элемент интерфейса, поэтому приведу примеры.

1
2
3
4
5
function liFormat (row, i, num) {
var result = row[0] + "<em class="qnt">" +
row[1] + " тыс.чел.</em>";
return result;
}

В опции formatItem мы определили имя вызываемой функции - liFormat, а сама функция просто формирует строку, которая будет вставлена в соответствующий элемент LI. Строка содержит название поселка и элемент em, в который выводится количество проживающих там, в тысячах человек. Элемент em имеет класс qnt, с помощью которого, используя CSS, мы сдвигаем этот элемент вправо, немного уменьшаем размер шрифта и делаем сам шрифт зеленого цвета.
Следующий пример для опции onItemSelect:

1
2
3
4
5
6
function selectItem(li) {
if( li == null ) var sValue = "Ничего не выбрано!";
if( !!li.extra ) var sValue = li.extra[2];
else var sValue = li.selectValue;
alert("Выбрана запись с ID: " + sValue);
}

Здесь видно как можно работать со значениями атрибута “extra” выбранного элемента LI. В примере мы выводим в alert значение идентификатора для записи из нашей тестовой базы.

Нам осталось только разобрать те действия, которые будут выполняться на стороне сервера. Как Вы наверное помните, мы выбрали для этого PHP. Вспомним также, что на сервер передается GET-запрос с параметром q, содержащим уже введенные пользователем символы. Сам код Вы сможете посмотреть, скачав файл примера.

Весь код мы будем выполнять только в случае существования XMLHttpRequest, только если передан GET-запрос с параметром q. Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:
[cc lang="bash" width="850" theme="vibrant"]
1:Пашковский:Краснодарский край:43,0
2:Горячеводский:Ставропольский край:34,4
3:Калинино:Краснодарский край:34,1
4:Приволжский:Саратовская область:32,0
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
268:Залари:Иркутская область:10,0
269:Октябрьский:Пермский край:10,0
270:Ишеевка:Ульяновская область:10,0
271:Жешарт:Республика Коми:10,0
272:Прохоровка:Белгородская область:10,0
[cc lang="bash" width="850" theme="vibrant"]

Нравится эта статья? Подпишитесь на RSS-ленту и получите еще больше классной информации!