Событие изменения триггера автозаполнения jQuery

Question

Как программно вызвать обработчик события изменения автозаполнения в jQuery UI?

Подвод

$("#CompanyList").autocomplete({ 
    source: context.companies, 
    change: handleCompanyChanged 
});

Разные попытки пока что

$("#CompanyList").change();
$("#CompanyList").trigger("change");
$("#CompanyList").triggerHandler("change");

На основании других ответов должно работать:

Как вызвать событие изменения jQuery в коде

jQuery Автозаполнение и при изменении Проблема

Справка по автозаполнению JQuery

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

Что мне не хватает?

Answer 1

Вот, пожалуйста. Это немного грязно, но это работает.

$(function () {  
  var companyList = $("#CompanyList").autocomplete({ 
      change: function() {
          alert('changed');
      }
   });
   companyList.autocomplete('option','change').call(companyList);
});

Answer 2

это тоже будет работать

$("#CompanyList").autocomplete({
  source : yourSource,
  change : yourChangeHandler
})

// deprecated
//$("#CompanyList").data("autocomplete")._trigger("change")
// use this now
$("#CompanyList").data("ui-autocomplete")._trigger("change")

Answer 3

Лучше использовать событие select.Событие изменения связано с keydown, как сказал Уил.Поэтому, если вы хотите прослушать изменения при выборе, выберите вот так.

$("#yourcomponent").autocomplete({  
    select: function(event, ui) {
        console.log(ui);
    }
});

Answer 4

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

$("#CompanyList").trigger('keydown');

Они не привязываются к событию 'change', потому что оно срабатывает только на уровне DOM, когда поле формы теряет фокус. Автозаполнение должно отвечать быстрее, чем «потерянный фокус», поэтому оно должно привязываться к ключевому событию.

Делаем это:

companyList.autocomplete('option','change').call(companyList);

Приведет к ошибке, если пользователь повторно наберет точную опцию, которая была там ранее.

Answer 5

Вот относительно чистое решение для тех, кто ищет эту тему:

// run when eventlistener is triggered
$("#CompanyList").on( "autocompletechange", function(event,ui) {
   // post value to console for validation
   console.log($(this).val());
});

Per api.jqueryui.com / autocomplete / , это связывает функцию с обработчиком событий.Он запускается как при выборе пользователем значения из списка автозаполнения, так и при вводе значения вручную.Триггер срабатывает, когда поле теряет фокус.

Answer 6

Самый простой и надежный способ - использовать внутреннюю ._trigger () для запуска события автозаполнения.

$("#CompanyList").autocomplete({
  source : yourSource,
  change : yourChangeHandler
})

$("#CompanyList").data("ui-autocomplete")._trigger("change");

Обратите внимание, пользовательский интерфейс jQuery 1.9 изменен с .data ("автозаполнение") на.данных ( "UI-автополный").Вы также можете увидеть некоторых людей, использующих .data («uiAutocomplete»), который действительно работает в 1.9 и 1.10, но «ui-autocomplete» является официальной предпочтительной формой.См. http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys для определения имен jQuery UI на ключах данных.

Answer 7

Программный триггер для вызова события autocomplete.change осуществляется через триггер с пространством имен на элементе выбора источника.

$("#CompanyList").trigger("blur.autocomplete");

В версии 1.8 пользовательского интерфейса jquery.

.bind( "blur.autocomplete", function( event ) {
    if ( self.options.disabled ) {
        return;
    }

    clearTimeout( self.searching );
    // clicks on the menu (or a button to trigger a search) will cause a blur event
    self.closing = setTimeout(function() {
        self.close( event );
        self._change( event );
    }, 150 );
});

Answer 8

Вы должны вручную bind событие, а не предоставить его как свойство объекта инициализации, чтобы сделать его доступным для trigger.

$("#CompanyList").autocomplete({ 
    source: context.companies
}).bind( 'autocompletechange', handleCompanyChanged );

затем

$("#CompanyList").trigger("autocompletechange");

Это немного обходной путь, но я поддерживаю обходные пути, которые улучшают семантическую однородность библиотеки!

Answer 9

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

$("#CompanyList").autocomplete({ 
    source: context.companies, 
    change: handleCompanyChanged,
    select: function(event,ui){
        $("#CompanyList").trigger('blur');
        $("#CompanyList").val(ui.item.value);
        handleCompanyChanged();
    }
});

Answer 10

Ну, это работает для меня, просто привязывая событие нажатия клавиши к поисковому вводу, как это:

... Instantiate your autofill here...

    $("#CompanyList").bind("keypress", function(){
    if (nowDoing==1) {
        nowDoing = 0;
        $('#form_459174').clearForm();
    }        
});