Автозаполнение

Autocomplete

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин Autocomplete помогает заполнять текстовые поля, предлагая подходящие варианты по первым набранным символам. Варианты подбираются из заранее предоставленного массива с значениями или запрошены у сервера методом ajax. В данном примере автозаполнение будет предлагать названия языков программирования.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~label for="tags"~gt~Язык программирования: ~lt~/label~gt~~lt~br /~gt~
  ~lt~input id="tags" /~gt~
  ~lt~script~gt~
    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});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Подгрузка удаленных данных~lt~/tit~gt~
~lt~coment~gt~Данные для автозаполнения могут запрошеваться у удаленных источников: с сервера текущего или другого сайта (методом JSONP). Подробности в разделе "Описание". В данном примере, данные берутся с www.geonames.org~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    .ui-autocomplete-loading {background:white url('http://tinyurl.com/6xj8y5j') right center no-repeat;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~label for="tags"~gt~Название города:~lt~/label~gt~~lt~br /~gt~
  ~lt~input id="tags" /~gt~
  ~lt~script~gt~
    $( "#tags" ).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.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Скроллируемый результат~lt~/tit~gt~
~lt~coment~gt~Часто список подходящих слов оказывается слишком длинным и занимает очень большую высоту. Для таких случаев можно указать максимальную высоту плашки вывода результатов и если весь список не будет там помещаться, то она станет скроллируемой. Для этого необходимо поработать с css-свойствами класса ui-autocomplete (см. исходный код примера). В данном примере можете ввести символ "s", чтобы увидеть результат.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    .ui-autocomplete{
      max-height: 100px;
      overflow-y: auto;
      /* отменим горизонтальный скролл */
      overflow-x: hidden;
      /* добавим padding для учета вертикального скролла */
      padding-right: 20px;
    }
    /* В IE 6 не определено свойство max-height
    *  поэтому для него лучше установим постоянную высоту.
    */
    * html .ui-autocomplete{
      height: 100px;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~label for="tags"~gt~Язык программирования: ~lt~/label~gt~~lt~br /~gt~
  ~lt~input id="tags" /~gt~
  ~lt~script~gt~
    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});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Категории~lt~/tit~gt~
~lt~coment~gt~При необходимости, можно организовать вывод элементов автозаполнения, сгруппированных по категориям. Введите в текстовое поле "ч", чтобы посмотреть результат.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    .ui-autocomplete-category{
      font-weight:bold;
      padding:3px 4px;
      line-height:1.5;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~label for="tags"~gt~Места: ~lt~/label~gt~~lt~br /~gt~
  ~lt~input id="tags" /~gt~
  ~lt~script~gt~
    $.widget("custom.catcomplete", $.ui.autocomplete, {
      _renderMenu: function(ul, items){
        var self = this,
        currentCategory = "";
        $.each( items, function(index, item){
          if(item.category != currentCategory){
            ul.append( "~lt~li class='ui-autocomplete-category'~gt~" + item.category + "~lt~/li~gt~" );
            currentCategory = item.category;
          }
          self._renderItem( ul, item );
        });
      }
    });

    var availableTags = [
      {label:"Чебоксары", category:"города"},
      {label:"Челябинск", category:"города"},
      {label:"Челны", category:"поселки"},
      {label:"Ставрополь", category:"города"},
      {label:"Чехия", category:"страны"}
    ];

    $( "#tags" ).catcomplete({
      delay: 0,
      source:availableTags
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Несколько значений~lt~/tit~gt~
~lt~coment~gt~В некоторых случаях, в текстовом поле необходимо указать сразу несколько значений (обычно через запятую). Чтобы организовать автозаполнение для такого случая, необходимо будет написать пару десятков строк кода (см. исходный код примера). Для того, чтобы увидеть результат начните вводить "j" или "c", после выбора одной из подсказок введите еще один символ и.т.д.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~label for="tags"~gt~Язык программирования: ~lt~/label~gt~~lt~br /~gt~
  ~lt~input id="tags" /~gt~
  ~lt~script~gt~
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    function split(val){
      return val.split( /,\s*/ );
    }
    function extractLast(term){
      return split(term).pop();
    }

    $("#tags")
    // остановить смену фокуса, если выделен один из элементов автозаполнения
    .bind( "keydown", function(event){
      if ( event.keyCode === $.ui.keyCode.TAB &&
      $(this).data("autocomplete").menu.active ){
        event.preventDefault();
      }
    })
    .autocomplete({
      minLength: 0,
      source: function(request, response){
        // делегируем поиск элементов автозаполнения обратно плагину, предварительно убрав уже выбранные элементы
        response( $.ui.autocomplete.filter(
        availableTags, extractLast(request.term)) );
      },
      focus: function(){
        // отменяем вставку значения на получение фокуса
        return false;
      },
      select: function(event, ui){
        var terms = split(this.value);
        // удаляем вводимую часть текста и помещаем вместо нее выбранный элемент
        terms.pop();
        terms.push(ui.item.value);
        // собираем все элементы в строку, разделяя их запятыми и вставляем 
        // строку обратно в текстовое поле
        terms.push("");
        this.value = terms.join(", ");
        return false;
      }
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Методы

События

Оформление

Плагин Autocomplete помогает пользователю заполнять текстовые поля, предлагая подходящие варианты по первым набранным им символам. Чтобы выбрать вариант из предоставленных подсказок можно воспользоваться клавиатурой (клавиши стрелок и enter) или мышью (кликнув по нужному варианту).

Данные для автозаполнения могут быть заданы тремя способами:

Массивом (это будет хорошим решением, если количество вариантов не превышает 50-100 элементов).
URL страницы, на которую будет автоматически отправляться ajax-запрос при каждом изменении вводимого текста.
Функцией. В этом случае поиск подходящих элементов нужно будет осуществить самостоятельно (наиболее гибкий вариант).

Во всех случаях, источник данных указывается в свойстве source. Разберем все три возможных варианта задания этого свойства более подробно:

Массив

В этом случае, задается либо массив строк, либо массив объектов, которые должны содержать поля label, value или оба. Если заданы оба поля, то в списке автозаполнения будут показываться поля из label, а при выборе любого из них, в текстовое поле будет помещен соответствующее значение value. Если задать массив объектов только с label или только с value, то эти значения будут отображаться и в предложенном списке и вставляться при выборе:

// массив строк
var availableTags = [
  "Испанский",
  "Итальянский",
  "Английский",
  "Китайский",
  "Русский"
];
 
// или массив объектов
availableTags = [
  {label:"Испанский", value:"es"},
  {label:"Итальянский", value:"it"},
  {label:"Английский", value:"en"},
  {label:"Китайский", value:"zh"},
  {label:"Русский", value:"ru"}
];
 
// задаем массив в качестве источника слов для автозаполнения.
$( "#tags" ).autocomplete({source: availableTags});

URL страницы

Если в свойстве source задать строку с url-адресом, то при изменении содержимого текстового поля, по этому адресу будет автоматически производиться ajax-запрос на сервер. Серверу будет передаваться содержимое текстового поля в параметре term. Естественно, обработку данных на сервере вы должны будете организовать самостоятельно (скорее всего, это будет заключаться в поиске подходящих слов по подстроке, в вашей базе данных). Ответ от сервера должен соответствовать тому же формату, что и в предыдущем случае:

// javascript-код на странице
$("#tags").autocomplete({
  source: "search.php", // url-адрес
  minLength: 2 // минимальное количество для совершения запроса
});
~lt~/source~gt~
Так может выглядеть код на стороне сервера (страница search.php)
~lt~source lang="php"~gt~
// допустим, функция findAutocomplete ищет слова (например в БД) по 
// заданной подстроке и возвращает массив с подходящими словами.
$elements = findAutocomplete($_GET['term']);
$s = "[".implode(",", $elements)."]";
echo $s;
// в итоге, ответ будет содержать примерно следующее  ["finded_1", "finded_2", "finded_3", ...]

Функция

Это наиболее гибкое из возможных решений. Заданная функция будет получать два параметра:

Первый — объект запроса, который будет содержать одно поле: term. Оно будет содержать текущее содержимое текстового поля, для которого нужно подобрать элементы автозаполнения.
Вторым параметром будет задана функция, которую будет необходимо вызвать и передать ей список подходящих элементов автозаполнения. Он должен соответствовать тому же формату, что и в предыдущих случаях (массив строк или массив объектов). Необходимо отметить, что эта функция должна быть вызвана при любых обстоятельствах, даже если при подборе элементов автозаполнения произошла ошибка.

Рассмотрим пример, в котором в качестве свойства source задается функция, запрашивающая данные для автозаполнения на стороннем сервере (кроссдоменный запрос). Этот пример реализован выше под заголовком "Подгрузка удаленных данных".

    $( "#tags" ).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
            response($.map(data.geonames, function(item){
              return{
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2
    });

↓ Имя свойства :типы значений (значение по умолчанию)

disabled:boolean(false)

Останавливает\возобновляет работу плагина Autocomplete.

// ------- Работа со свойством disabled ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").autocomplete( "option", "disabled" );
//изменение значения disabled
$("selector").autocomplete( "option", "disabled", true );

appendTo:селектор("body")

Определяет, в какой элемент будет вставлен список автозаполнения.

// ------- Работа со свойством appendTo ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ appendTo:"#someElem" });
 
//получение значения appendTo
var appendTo = $(".selector").autocomplete( "option", "appendTo" );
//изменение значения appendTo
$("selector").autocomplete( "option", "appendTo", "#someElem" );

autoFocus:boolean(false)

Когда этот параметр равен true, первое значение в списке автозаполнения будет автоматически оказываться в фокусе. (Не увидел разницы в работе плагина при разных значениях этого параметра (замечание переводчика)).

// ------- Работа со свойством autoFocus ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ autoFocus:true });
 
//получение значения autoFocus
var autoFocus = $("selector").autocomplete( "option", "autoFocus" );
//изменение значения autoFocus
$("selector").autocomplete( "option", "autoFocus", true );

delay:integer(300)

Определяет сколько миллисекунд должно пройти после последнего нажатия клавиши, чтобы сработало автозаполнение. Эта задержка важна при получении данных из удаленного источника (если она будет равна 0, то запрос будет производиться при каждом введенном символе, что приведет к большому количеству лишних запросов на сервер). Если вы используете локальные списки автозаполнения (задаете его с помощью массива), то можете смело присвоить этому свойству 0.

// ------- Работа со свойством delay ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ delay: 0 });
 
//получение значения delay
var delay = $("selector").autocomplete( "option", "delay" );
//изменение значения delay
$("selector").autocomplete( "option", "delay", 0 );

minLength:integer(1)

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

// ------- Работа со свойством minLength ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ minLength: 2 });
 
//получение значения minLength
var minLength = $("selector").autocomplete( "option", "minLength" );
//изменение значения minLength
$("selector").autocomplete( "option", "minLength", 2 );

position:object({my:"left top", at:"left bottom", collision:"none"})

Определяет позиционирование списка автозаполнения.

// ------- Работа со свойством position ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ position:{my:"right top", at:"right bottom"} });
 
//получение значения position
var position = $("selector").autocomplete( "option", "position" );
//изменение значения position
$("selector").autocomplete( "option", "position", {my:"right top", at:"right bottom"} );

source:string,array,функция(нет. Необходимо задать)

Определяет источник элементов автозаполнения. Подробности в разделе Описание.

// ------- Работа со свойством source ---------
// в момент установки autocomplete на элемент
$("selector").autocomplete({ source:["c++", "java", "php"] });
 
//получение значения source
var source = $("selector").autocomplete( "option", "source" );
//изменение значения source
$("selector").autocomplete( "option", "source", ["c++", "java", "php"] );

↓ Способ вызова

.autocomplete("destroy")

Удаляет всю функциональность плагина autocomplete с выбранных элементов.

.autocomplete("disable")

Останавливает работу плагина autocomplete на выбранных элементах. Для возобновления, необходимо воспользоваться методом .autocomplete("enable").

.autocomplete("enable")

Возобновляет работу плагина autocomplete на выбранных элементах (например, после того, как она была остановлена с помощью .autocomplete("disable")).

.autocomplete("option", optionName, [value])

Этот метод позволяет изменять/получать свойства плагина autocomplete. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .autocomplete("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.

.autocomplete("widget")

Возвращает те из выбранных элементов, к которым был применен плагин autocomplete (поиск осуществляется по классу ui-autocomplete, который автоматически присваивается этим элементам).

.autocomplete("search" , [value])

Этот метод вызывает событие типа search на выбранных элементах, что запустит процедуру поиска подходящих элементов автозаполнения (если конечно содержимое текстового поля будет соответствовать значению minLength). Если задать необязательный параметр value, то поиск элементов будет произведен по этому значению, независимо от содержимого текстового поля. Например, если задать minLength = 0 и вызвать .autocomplete("search" , "") (с пустым value), то список автозаполнения будет открыт со всеми возможными вариантами.

.autocomplete("close")

Закрывает список автозаполнения.

↓ Внутреннее имя события :внешнее имя

create:autocompletecreate

Событие create происходит в момент инициализации autocomplete на элементе.

// обработка события create
$("selector").autocomplete({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompletecreate", function(event, ui){ ... });

search:autocompletesearch

Событие search происходит до того, как начинается поиск подходящих элементов, но после того, как закончится задержка (см. свойство delay). Если обработчик этого события вернет false, то поиск элементов для автозаполнения будет отменен.

// обработка события search
$("selector").autocomplete({
   search: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompletesearch", function(event, ui){ ... });

open:autocompleteopen

Событие open происходит в момент открытия списка с элементами автозаполнения.

// обработка события open
$("selector").autocomplete({
   open: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompleteopen", function(event, ui){ ... });

focus:autocompletefocus

Происходит при выделении одного из элементов автозаполнения. Когда это событие происходит из-за нажатия на клавиши клавиатуры ↓ или ↑ (кроме этого, событие focus может происходить при наведении курсора на элементы), текст выделенного элемента оказывается в текстовом поле. Если обработчик события focus возвратит false, то замены текста в текстовом поле не произойдет, однако выделения элемента это не отменит.

// обработка события focus
$("selector").autocomplete({
   focus: function(event, ui) {  /*ui.item будет содержать выделенный элемент*/ }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompletefocus", function(event, ui){ ... });

select:autocompleteselect

Происходит при выборе элемента автозаполнения. Стандартное действие на это событие — перенос текста выбранного элемента в текстовое поле, а затем закрытие списка автозаполнения. Если обработчик события select вернет false, то переноса текста не произойдет, однако список все равно будет закрыт. Очередность событий при выборе одного из элементов: select, close, а затем change.

// обработка события select
$("selector").autocomplete({
   select: function(event, ui) { /*ui.item будет содержать выбранный элемент*/ }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompleteselect", function(event, ui){ ... });

close:autocompleteclose

Происходит при закрытии списка автозаполнения. Очередность событий при выборе одного из элементов: select, close, а затем change.

// обработка события close
$("selector").autocomplete({
   close: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompleteclose", function(event, ui){ ... });

change:autocompletechange

Событие change происходит при выборе элемента автозаполнения, уже после закрытия всего списка. То есть, очередность событий при выборе одного из элементов: select, close, а затем change.

// обработка события change
$("selector").autocomplete({
   change: function(event, ui) { /*ui.item будет содержать выбранный элемент*/ }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "autocompletechange", function(event, ui){ ... });

Плагин Autocomplete использует стандартные стили jQueryUI-css для оформления выпадающего списка с элементами автозаполнения. Для редактирования оформления рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с элементами списка автозаполнения, можно воспользоваться информацией о его структуре:

// если применить плагин Autocomplete к обычному текстовому полю:
~lt~input/~gt~

// то Autocomplete автоматически внесет следующие изменения:
~lt~input class="ui-autocomplete-input"/~gt~
~lt~ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"~gt~
  ~lt~li class="ui-menu-item"~gt~
    ~lt~a class="ui-corner-all"~gt~item 1~lt~/a~gt~
  ~lt~/li~gt~
  ~lt~li class="ui-menu-item"~gt~
    ~lt~a class="ui-corner-all"~gt~item 2~lt~/a~gt~
  ~lt~/li~gt~
  ~lt~li class="ui-menu-item"~gt~
    ~lt~a class="ui-corner-all"~gt~item 3~lt~/a~gt~
  ~lt~/li~gt~
~lt~/ul~gt~

Т.е. элементу текстового поля будет добавлен класс ui-autocomplete-input. Выпадающей список представляет из себя html-список, каждый элемент которого будет иметь класс ui-menu-item.

Автозаполнение

Autocomplete

Массив

URL страницы

Функция

Функции по категориям

Навигация