Шаг 235.
Библиотека jQuery. Использование модулей расширения. Библиотека расширений jQuery UI. Формы. Виджет Autocomplete (окончание)

    На этом шаге мы рассмотрим динамическое формирование подсказок из данных, полученных с сервера.

    Материал этого шага базируется на http://www.linkexchanger.su/2011/700.html.

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

    Опция source, которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно разработчику. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org.

    Сначала приведем рабочий код, потом объясним, как и что работает.

    Сначала - разметка HTML-документа:

.   .   .   .
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=win-1251"/>
  <style type="text/css">
    .ui-autocomplete-loading {
    background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') 
        right center no-repeat;
    }
    #city { width: 25em; }
    #log { height: 200px; width: 600px; overflow: auto; }
  </style>

  <title>jQuery UI</title>


  <link href="css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
  <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
  <script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
  <script src="ui235_1.js" type="text/javascript"></script>

</head>
<body>  
  <div class="ui-widget">
  <label for="city">Город: </label><input id="city" /><br />
  <span style="font-size:.8em;">Поддерживается 
      <a href="http://geonames.org">geonames.org</a></span>

  </div>
  <div id="log" class="ui-widget ui-widget-content"></div>

</body>
.   .   .   .

    Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации. Отметим, что стиль оформления элементов определен в заголовке документа.

    Теперь - текст скрипта:

$(document).ready(function() {

  $("#city").autocomplete({
    source: function(request,response) {
      $.ajax({
        url: "http://ws.geonames.org/searchJSON",

        dataType: "jsonp",
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 12,
          name_startsWith: request.term
        },
        success: function(data) {
          response($.map(data.geonames, function(item) {
            return {
              label: item.name + ", " + item.countryName,
              value: item.name + " (" + item.countryName + ")" + " [" + 
                     item.lat + ", " + item.lng + "]"
            }
          }));
        }
      });
    },
    minLength: 3,
    select: function(event,ui) {
      $("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!")
                         .prependTo("#log");
      $("#log").attr("scrollTop", 0);
    }
  });

});
Полный текст этого примера можно взять здесь.

    Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства - обязательное свойство source, а также свойства minLength и select.

    Мы займемся рассмотрением только свойства source, где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент - request - объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент - response - функция, с помощью которой будет обрабатываться полученный ответ.

    Внутри функции, определенной в свойстве source, мы имеем практически неограниченную свободу действий. Поэтому пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие - надо смотреть документацию по API на сервере geonames.org). В последнем параметре передаем request.term - то, что ввел пользователь.

    В следующей опции ajax-запроса - опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта - item.countryName, item.lng, item.lat (почему свойства именно такие - см. документацию по API, которую предоставляет веб-сервис). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

    Результат работы скрипта приведен на рисунке 1.

Рис.1. Результат работы скрипта

    На следующем шаге мы рассмотрим виджет Validation.




Предыдущий шаг Содержание Следующий шаг