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

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

подключение

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

Разное Попытки До Сих Пор

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

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

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

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

Автозаполнение JQuery помогите!--18-->

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

что я упустил?

45
autocomplete jquery-ui

13 ответов

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

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

это тоже сработает

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

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

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

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

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

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

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

делаю так: 

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

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

11

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

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

10

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

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

затем

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

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

3

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

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

в версии 1.8 jQuery UI..

.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 );
            });
3

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

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

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

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

3

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

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

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

... Instantiate your autofill here...

    $("#CompanyList").bind("keypress", function(){
    if (nowDoing==1) {
        nowDoing = 0;
        $('#form_459174').clearForm();
    }        
});
1
$('#search').autocomplete( { source: items } );
$('#search:focus').autocomplete('search', $('#search').val() );

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

0

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

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

надеюсь, что это поможет!

0

другое решение, чем предыдущие:

//With trigger
$("#CompanyList").trigger("keydown");

//With the autocomplete API
$("#CompanyList").autocomplete("search");

jQuery UI автозаполнения API

https://jsfiddle.net/mwneepop/

0