Виджет автозаполнения

autoFocus

Инициализация автодополнения с указанным параметром autoFocus.

$( ".selector" ).autocomplete({
  autoFocus: true
});

Получение или изменение параметра autoFocus, после инициализации:

// Getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
 
// Setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );

classes

$( ".selector" ).autocomplete({
  classes: {
    "ui-autocomplete": "highlight"
  }
});

// Getter
var themeClass = $( ".selector" ).autocomplete( "option", "classes.ui-autocomplete" );
 
// Setter
$( ".selector" ).autocomplete( "option", "classes.ui-autocomplete", "highlight" );

delay

Инициализация автодополнения с указанным параметром delay.

$( ".selector" ).autocomplete({
  delay: 500
});

Получение или изменение параметра delay, после инициализации:

// Getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
// Setter
$( ".selector" ).autocomplete( "option", "delay", 500 );

disabled

Инициализация автодополнения с указанным параметром disabled.

$( ".selector" ).autocomplete({
  disabled: true
});

Получение или изменение параметра disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
// Setter
$( ".selector" ).autocomplete( "option", "disabled", true );

minLength

Инициализация автодополнения с указанным параметром minLength.

$( ".selector" ).autocomplete({
  minLength: 0
});

Получение или изменение параметра minLength, после инициализации:

// Getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
// Setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );

position

Инициализация автодополнения с указанным параметром position.

$( ".selector" ).autocomplete({
  position: { my : "right top", at: "right bottom" }
});

Получение или изменение параметра position, после инициализации:

// Getter
var position = $( ".selector" ).autocomplete( "option", "position" );
 
// Setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );

source

• Массив: Массив может использоваться для локальных данных. Поддерживаются два формата:
  • Массив строк: [ "Choice1", "Choice2" ]
  • Массив объектов со свойствами label и value: [ { label: "Choice1", value: "value1" }, ... ]
  Свойство метка отображается в меню предложений. Значение будет вставлено в поле ввода, когда пользователь выберет элемент. Если указано только одно свойство, оно будет использоваться для обоих, например, если вы предоставите только свойства value, значение также будет использоваться в качестве метки.
• Строка: При использовании строки плагин Autocomplete ожидает, что строка указывает на ресурс URL, который вернет данные JSON. Он может находиться на том же хосте или на другом (должен поддерживать CORS). Плагин Autocomplete не фильтрует результаты, вместо этого добавляется параметр запроса со значением term, которое скрипт на стороне сервера должен использовать для фильтрации результатов. Например, если параметр source установлен на "https://example.com" и пользователь вводит foo, будет выполнен запрос GET к https://example.com?term=foo. Данные сами по себе могут иметь тот же формат, что и локальные данные, описанные выше.
• Функция: Третий вариант, обратный вызов, обеспечивает наибольшую гибкость и может использоваться для подключения любого источника данных к Autocomplete, включая JSONP. Обратный вызов получает два аргумента:
  • Объект request, со свойством term, которое ссылается на значение, в настоящее время находящееся в текстовом поле ввода. Например, если пользователь вводит "new yo" в поле города, термин Autocomplete будет равен "new yo".
  • Обратный вызов response, который ожидает единственный аргумент: данные для предложения пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и могут иметь любой из описанных выше форматов для простых локальных данных. При предоставлении пользовательского обратного вызова источника важно обрабатывать ошибки при запросе. Вы всегда должны вызывать обратный вызов response, даже если возникла ошибка. Это гарантирует, что виджет всегда имеет правильное состояние.

  При фильтрации данных локально можно использовать встроенную функцию $.ui.autocomplete.escapeRegex . Она принимает один строковый аргумент и экранирует все символы регулярных выражений, делая результат безопасным для передачи в new RegExp().

Инициализация автодополнения с указанным параметром source.

$( ".selector" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

Получение или изменение параметра source, после инициализации:

// Getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// Setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

close( event, ui )Тип: autocompleteclose

• event
  Тип: Event
• ui
  Тип: Объект

Примечание: Объект ui пустой, но включён для согласованности с другими событиями.

$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );

create( event, ui )Тип: autocompletecreate

• event
  Тип: Event
• ui
  Тип: Объект

Примечание: Объект ui пустой, но включён для согласованности с другими событиями.

$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

focus( event, ui )Тип: autocompletefocus

• event
  Тип: Event
• ui
  Тип: Объект
  • item
    Тип: Объект
    Выделенный элемент.

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

open( event, ui )Тип: autocompleteopen

• event
  Тип: Event
• ui
  Тип: Объект

Примечание: Объект ui пустой, но включён для согласованности с другими событиями.

$( ".selector" ).autocomplete({
  open: function( event, ui ) {}
});

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );

response( event, ui )Тип: autocompleteresponse

• event
  Тип: Event
• ui
  Тип: Объект
  • content
    Тип: Массив
    Содержит данные ответа и может быть изменён для изменения отображаемых результатов. Эти данные уже нормализованы, поэтому при модификации данных убедитесь, что каждый элемент содержит свойства value и label.

$( ".selector" ).autocomplete({
  response: function( event, ui ) {}
});

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );

search( event, ui )Тип: autocompletesearch

• event
  Тип: Event
• ui
  Тип: Объект

Примечание: Объект ui пустой, но включён для согласованности с другими событиями.

$( ".selector" ).autocomplete({
  search: function( event, ui ) {}
});

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );

select( event, ui )Тип: autocompleteselect

• event
  Тип: Event
• ui
  Тип: Объект
  • item
    Тип: Объект
    Объект со свойствами label и value для выбранного элемента.

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );