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

如何以编程方式触发jQuery UI的自动完成更改事件处理程序?

挂钩

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

到目前为止的杂项尝试

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

基于其他答案,它应该工作:

如何触发代码中的jQuery更改事件

jQuery自动完成和更改问题

JQuery自动完成的帮助

当我通过浏览器手动与自动完成input交互时,更改事件会如预期的那样激发; 但是我想在某些情况下以编程方式触发更改事件。

我错过了什么?

干得好。 这有点乱,但它的作品。

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

这也将工作

 $("#CompanyList").autocomplete({ source : yourSource, change : yourChangeHandler }) // deprecated //$("#CompanyList").data("autocomplete")._trigger("change") // use this now $("#CompanyList").data("ui-autocomplete")._trigger("change") 

相反,使用select事件会更好。 威尔说,改变事件必然会发生。 所以,如果你想听取更改select使用类似的select。

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

它们绑定到自动完成源代码中的keydown,所以触发keydown会更新它。

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

他们没有绑定到“更改”事件,因为只有在表单域失去焦点时才会在DOM级别触发。 自动完成需要比“失去焦点”更快地响应,所以它必须绑定到关键事件。

这样做:

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

如果用户重新input之前的确切选项,将会导致一个错误。

对于其他人来说,这是一个相对干净的解决scheme:

 // 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/ ,这将一个函数绑定到eventlistener。 当用户从自动完成列表中select一个值并且手动键入一个值时,它会被触发。 当领域失去焦点时,触发器会发射。

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

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

然后

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

这是一个解决方法,但我赞成改善图书馆的语义统一性的解决方法!

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

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

最简单,最可靠的方法是使用内部的._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”是官方首选的forms。 请参阅http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys了解数据键上的jQuery UI名称空间。

我试图做同样的,但没有保持一个自动完成的variables。 我在select事件中以编程方式遍历这个调用更改处理程序,您只需要担心input的实际值。

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

那么它适用于我只是绑定一个按键事件的searchinput,如下所示:

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

这似乎是唯一为我工作的人。

这篇文章相当老,但对于2016年来到这里的人来说。 这里的例子都没有为我工作。 使用keyup而不是autocompletechange做了这个工作。 使用jquery-ui 10.4

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

希望这个帮助!

另一个比以前的解决scheme:

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

jQuery UI自动完成API

https://jsfiddle.net/mwneepop/