Шаг 179.
Библиотека jQuery. Интерактивные формы. Компактные формы. Функция автодополнения на основе технологии AJAX. Окончательная версия

    На этом шаге мы приведем окончательную версию приложения.

    Ниже приводится окончательная версия программного кода, реализующего функцию автодополнения для поля ввода:

//**************************************
//                 Поиск
//**************************************
$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  
  if ($searchInput.val()) {
    $searchLabel.hide();
  }

  $searchInput
  .focus(function() {
    $searchLabel.hide();
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
    }
  });

  $searchLabel.click(function() {
    $searchInput.trigger('focus');
  });

});


$(document).ready(function() {
  var $autocomplete = $('<ul class="autocomplete"></ul>')
  .hide()
  .insertAfter('#search-text');
  var selectedItem = null;

  var setSelectedItem = function(item) {
    selectedItem = item;

    if (selectedItem === null) {
      $autocomplete.hide();
      return;
    }

    if (selectedItem < 0) {
      selectedItem = 0;
    }
    if (selectedItem >= $autocomplete.find('li').length) {
      selectedItem = $autocomplete.find('li').length - 1;
    }
    $autocomplete.find('li').removeClass('selected')
      .eq(selectedItem).addClass('selected');
    $autocomplete.show();
  };

  var populateSearchField = function() {
    $('#search-text').val($autocomplete
    .find('li').eq(selectedItem).text());
    setSelectedItem(null);
  };

  $('#search-text')
  .attr('autocomplete', 'off')
  .keyup(function(event) {
    if (event.keyCode > 40 || event.keyCode == 8) {
      // Клавиши с кодами 40 и ниже являются специальными клавишами
      // (enter, клавиши со стрелками, escape и другие).
      // Клавиша с кодом 8 - это клавиша забоя (backspace).
      $.ajax({
        'url': '../cgi-bin/autocomplete.php',
        'data': {'search-text': $('#search-text').val()},
        'dataType': 'json',
        'type': 'GET',
        'success': function(data) {
          if (data.length) {
            $autocomplete.empty();
            $.each(data, function(index, term) {
              $('<li></li>').text(term).appendTo($autocomplete)
               .mouseover(function() {
                setSelectedItem(index);
              }).click(populateSearchField);
            });

            setSelectedItem(0);
          }
          else {
            setSelectedItem(null);
          }
        }
      });
    }
    else if (event.keyCode == 38 && 
                                 selectedItem !== null) {
      // Нажата клавиша со стрелкой вверх.
      setSelectedItem(selectedItem - 1);
      event.preventDefault();
    }
    else if (event.keyCode == 40 && 
                                 selectedItem !== null) {
      // Нажата клавиша со стрелкой вниз.
      setSelectedItem(selectedItem + 1);
      event.preventDefault();
    }
    
    else if (event.keyCode == 27 && selectedItem !== null) {
      // Пользователь нажал клавишу escape.
      setSelectedItem(null);
    }
  }).keypress(function(event) {
    if (event.keyCode == 13 && selectedItem !== null) {
      // Пользователь нажал клавишу enter.
      populateSearchField();
      event.preventDefault();
    }
  }).blur(function(event) {
    setTimeout(function() {
      setSelectedItem(null);
    }, 250);
  });
});


Рис.1. Окончательная версия

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

    Со следующего шага мы начнем рассматривать работу с числовыми данными в формах.




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