jQuery 自动完成触发更改事件

Posted 2023-03-05

【中文标题】jQuery 自动完成触发更改事件

【英文标题】：jQuery AutoComplete Trigger Change Event

【发布时间】：2011-09-19 20:40:49

【问题描述】：

如何以编程方式触发 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

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

我错过了什么？

【参考方案1】：

调用 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 );
);

【参考方案2】：

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

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

然后

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

这是一种变通方法，但我支持提高库语义一致性的变通方法！

【参考方案3】：

我试图做同样的事情，但没有保留自动完成变量。我在 select 事件上以编程方式遍历这个调用更改处理程序，您只需要担心输入的实际值。

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

【参考方案4】：

最好使用 select 事件。正如 Wil 所说，change 事件绑定到 keydown。因此，如果您想收听选择的更改，请使用这样的选择。

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

【讨论】：

为什么这不是最流行的解决方案？？

这是迄今为止最好的解决方案。

这是实际的解决方案。查看这个实现的代码。 jsfiddle.net/arjunarora208/t6ehkL5b

我认为问题是如何触发这个 select: 函数以编程方式触发，而不需要用户实际点击选择。

【参考方案5】：

不同于之前的另一种解决方案：

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

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

jQuery UI Autocomplete API

https://jsfiddle.net/mwneepop/

【讨论】：

您能详细说明一下吗？因为这个不应该工作，因为自动完成不是键控。我之前尝试过，但请详细说明它是如何工作的。

编辑了我的答案：不是keyup，而是keydown。

【参考方案6】：

这篇文章已经很老了，但对于那些在 2016 年来到这里的人来说。这里的例子都不适合我。使用 keyup 而不是 autocompletechange 完成了这项工作。使用jquery-ui 10.4

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

希望对您有所帮助！

【参考方案7】：

这个也可以

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

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

【讨论】：

@lordvlad 当我尝试调用更改事件时，错误控制台显示 $().data 未定义。

@Mihir 可能是他们在新版本中改变了一些东西。您仍然可以查看源代码，尝试找到一种方法。我就是这样发现的。祝你好运，也许你可以分享你的答案。

@lordvlad 似乎目前 .data('autocomplete') 应该更改为 elem.data("ui-autocomplete"); （正如 Chris Kinsella 在他的回答中所说的那样）。 IMO 您的答案比标记的要好，因为我们可以访问 change 函数的 event 和 ui 参数。

【参考方案8】：

对于查找此主题的其他人来说，这是一个相对干净的解决方案：

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

根据api.jqueryui.com/autocomplete/，这会将函数绑定到事件侦听器。当用户从自动完成列表中选择一个值以及手动输入一个值时都会触发它。当字段失去焦点时触发触发器。

【讨论】：

问题是如何以编程方式触发该处理程序，而不是如何定义它。这只是定义它的另一种方式。

【参考方案9】：

最简单、最可靠的方法是使用内部 ._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 命名空间。

【讨论】：

引用ui-autocomplete 的更改不是单独的答案，而是对@lordvlad 答案的评论

【参考方案10】：

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

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

【讨论】：

$("#search:focus").autocomplete("search") 可以。 ***.com/questions/4917195/…

【参考方案11】：

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

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

它们没有绑定到 'change' 事件，因为它只会在表单字段失去焦点时在 DOM 级别触发。自动完成需要比“失去焦点”更快地响应，因此它必须绑定到一个关键事件。

这样做：

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

如果用户重新键入之前存在的确切选项，则会导致错误。

【讨论】：

其实我认为他只是想触发 change 事件，它在失去焦点后触发，而不是下拉列表。

@kelton52 我相信他错误地认为自动完成小部件会使用更改事件，但事实并非如此。触发 keydown 依次调用内部 _searchTimeout，这是他真正想做的：github.com/jquery/jquery-ui/blob/master/ui/…

它在失去焦点时确实会调用更改事件

OP 想要触发小部件的内部更改事件，由 change 选项设置，该选项与 JS 更改事件是分开的。

+1 用于告诉自动完成更改在 keydown 上触发。这就是解决方案。干得好！请将此作为答案

【参考方案12】：

它对我有用，只需将按键事件绑定到搜索输入，如下所示：

... Instantiate your autofill here...

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

【参考方案13】：

给你。这有点乱，但它有效。

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

【讨论】：

工作胜过凌乱；这绝对不是太糟糕。谢谢您的帮助。这在某处有记录吗？

不，我认为应该是这样（或者是触发这些事件的更好方法）。我过去也遇到过这种情况。