jQuery Autocomplete JSON: авто заполнение

Задача: Создать авто заполнение на основе JSON данных.

Материалы: Документация jQuery Autocomplete.

Так как штатная библиотека авто заполнения не умеет работать с JSON данными, придется ее этому научить.

Если рассмотреть детально требования задачи, то выглядеть будет это так:

1. Послать запрос на получение JSON упакованных данных.
2. Сделать разбор полученного ответа и оформить его в человеко понятный вид.
3. Сохранить ID выбранной позиции в элемент Hidden.

Для начала, даем серверу знать, что запрос идет на получение JSON данных. Это можно сделать с помощью параметра. В моем примере, используется Joomla 1.5, поэтому, я буду применять "format=raw".

jQuery(document).ready(function($){
 
 // указать УРЛ
 var url = 'index.php?option=com_codirectory&amp;controller=citiescompanies&amp;task=display&amp;format=raw';
 // задать параметры для библиотеки
 var options = {
      matchContains: true,
      minChars: 2,
      max: 20,
      width: 200,
      dataType: 'json',
      cacheLength: 0,
      // задать дополнительные параметры для сервера
      extraParams: {
                   q: '',
                   searchcity: function () { return $("#searchcity").val() },
                   id_state: function () { return $("#id_state").val() },
                   id_country: function () { return $("#id_country").val() }
                   },
      // разбираем полученный ответ
      parse: function(data) {
               var parsed = [];
               data = data.data;
               if (data===null) {
                   data = [];
               }
               for (var i = 0; i < data.length; i++) {
                    parsed[parsed.length] = {
                            data: data[i],
                            value: data[i].city_name,
                           result: data[i].city_name
                   };
              }
 
               return parsed;
       },
// оформить полученный результат в человеко понятный вид
 formatItem: function(item) {
 return item.city_name + '<font>' + ' (' + item.cocount + ')' + '</font>';
 }
 };
 
 $('#searchcity')
 .autocomplete(url, options)
 // сохранить выбранную позицию в элемент
 .result(function(e, data) {
 $('#id_city').val(data.id);
 });
 
});

Евгений Бунин

jQuery Autocomplete JSON: авто заполнение