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

    На этом шаге мы рассмотрим методы этого виджета.

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

    Есть у виджета некоторые методы, с помощью которых можно еще более расширить его функциональность.

    Добавим в HTML-разметку пару кнопок:

  <button id="search">Искать "as"</button>
  <button id="close">Закрыть</button>
  <div class="ui-widget">
      <label for="tags">Значение: </label>
      <input id="tags" type="text" />
  </div>

    Текст скрипта будет выглядеть так:

$(document).ready(function() {

   var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
      "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
      "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
      "Python","Ruby","Scala","Scheme"];
 
   $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
   });

   $("#search").click(function(){
    $("#tags").autocomplete("search", "as");
   });

   $("#close").click(function(){
    $("#tags").autocomplete("close");
  });

});

Рис.1. Пример обработки нажатия клавиш

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

    Теперь, щелкая по кнопке Искать "as" мы можем имитировать действия пользователя, как если бы он ввел символы "as" в элементе input. Щелкнув по кнопке Закрыть - закрываем список подсказок, если он был открыт ранее.

    Ниже приведены описания всех доступных методов:

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




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