Question

如何以编程方式触发jQuery UI的AutoComplete更改事件处理程序？

联播

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

杂项尝试到目前为止

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

根据其他答案应工作：

How to trigger jQuery change event in code

jQuery Autocomplete and on change Problem

JQuery Autocomplete help

当我通过浏览器手动与AutoComplete输入交互时，更改事件按预期触发;但是我想在某些情况下以编程方式触发更改事件。

我错过了什么？

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事件。 Wil说，改变事件必然会被keydown所束缚。因此，如果你想听取选择的改变，请选择那样的。

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

Answer 4

它们绑定到自动完成源中的keydown，因此触发keydown会使其更新。

$("#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/，这会将一个函数绑定到eventlistener。当用户从自动完成列表中选择一个值以及他们手动键入值时，它都会被触发。当场失去焦点时触发器会触发。

Answer 6

您必须手动bind事件，而不是将其作为初始化对象的属性提供，以使其可供trigger使用。

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

然后

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

这是一个解决方法，但我赞成改进库的语义一致性的变通方法！

Answer 7

以编程方式触发调用autocomplete.change事件是通过源选择元素上的命名空间触发器。

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

在jquery UI的1.8版本中..

.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

最简单，最强大的方法是使用内部._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”是官方首选表单。有关数据键的jQuery UI名称，请参阅http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys。

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();
    }        
});

Answer 11

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

这似乎是唯一对我有用的。

Answer 12

这篇文章很老了，但是对于那些在2016年来到这里的人。这里没有一个例子适合我。使用keyup代替autocompletechange完成了这项工作。使用jquery-ui 10.4

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

希望这有帮助！

Answer 13

除了之前的解决方案之外的另一个解决方案：

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

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

jQuery UI Autocomplete API

https://jsfiddle.net/mwneepop/

jQuery自动完成触发器更改事件

13 个答案: