Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно…

Как обычно, для начала я приведу пример, а потом мы будем разбирать, как он работает.

Поскольку это всего лишь пример, поясню, что в левом текстовом поле доступен выбор российских городов, которые начинаются на букву «М», а в правом – список поселков городского типа (пгт) с численностью населения более 10 тыс. жителей (по данным Всероссийской переписи населения на 9 октября 2002 года).

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

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Сначала потребуется только подключить библиотеку jQuery и файл query.autocomplete.js в разделе HEAD нужной страницы.

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

Если скачаете пример, то легко сможете разобраться и в стилевом оформлении. Учтите, что файл jquery.autocomplete.js использует имена классов (начинаются с ac_), но если Вы захотите по каким-то причинам изменить эти имена – это тоже можно будет довольно легко сделать.

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

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

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

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

<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, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.

<script type="text/javascript">
$(document).ready(function(){
  $("#example2").autocomplete("autocomplete.php", {
    delay:10,
    minChars:2,
    matchSubset:1,
    autoFill:true,
    matchContains:1,
    cacheLength:10,
    selectFirst:true,
    formatItem:liFormat,
    maxItemsToShow:10,
    onItemSelect:selectItem
  });
});
</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).

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

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:

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. Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:

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

Мы читаем этот файл в массив, а затем в цикле перебираем все строки, в свою очередь разбивая каждую из них в массив, к элементу под номером один (название поселка) которого обращаемся для поиска соответствия с переданным GET-запросом. Если соответствие будет найдена выводим информацию, правда в несколько ином порядке, чем она хранилась в файле.

Такой подход выбран во-первых, потому что это пример, который должен быть очень просто воспроизведен на любом другом сайте, и во-вторых, чтобы при очень небольшом объеме данных дать почувствовать тот момент, когда запрос выполняется.

Вот собственно и все, обращу разве Ваше внимание на то, что для работы со строками использую мультибайтовые строковые функции.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru