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

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

Монтировать

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

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

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

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

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

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

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

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

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

Ответы

Ответ 1

Здесь вы идете. Это немного грязно, но оно работает.

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Выполнение этого действия:

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

Вызвать ошибку, если пользователь повторит точный вариант, который был там раньше.

Ответ 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/, это связывает функцию с eventlistener. Он запускается как при выборе пользователем значения из списка автозаполнения, так и при вводе вручную значения. Триггер срабатывает, когда поле теряет фокус.

Ответ 6

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

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

затем

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

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

Ответ 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 );
});

Ответ 8

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

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

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

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

Ответ 9

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

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

Ответ 10

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

... Instantiate your autofill here...

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

Ответ 11

$('#search').autocomplete( { source: items } );
$('#search:focus').autocomplete('search', $('#search').val() );

Кажется, это единственный, который работал у меня.

Ответ 12

Этот пост довольно старый, но для тех, кто получил здесь в 2016 году. Ни один из примеров здесь не работал у меня. Использование keyup вместо autocompletechange выполнило задание. Используя jquery-ui 10.4

$("#CompanyList").on("keyup", function (event, ui) {
    console.log($(this).val());
});

Надеюсь на эту помощь!