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