Evento de cambio de activador de jQuery Autocompletar

¿Cómo se desencadena programáticamente el controlador de eventos de cambio Autocompletar de jQuery UI?

Engánchate

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

Varios bashs hasta el momento

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

En función de otras respuestas, debería funcionar:

Cómo desencadenar el evento de cambio de jQuery en el código

Autocompletar jQuery y en cambio Problema

JQuery Autocompletar ayuda

El evento de cambio se dispara como se espera cuando interactúo manualmente con la entrada Autocompletar a través del navegador; sin embargo, me gustaría disparar programáticamente el evento de cambio en algunos casos.

¿Qué me estoy perdiendo?

Aqui tienes. Está un poco desordenado pero funciona.

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

esto funcionará, también

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

Es mejor usar el evento select en su lugar. El evento de cambio está ligado a keydown como dijo Wil. Entonces, si quiere escuchar el cambio en la selección, use seleccionar de esa manera.

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

Están vinculados a la clave en la fuente de autocompletar, por lo que desencadenar la tecla se actualizará.

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

No son vinculantes para el evento de “cambio” porque solo se desencadena en el nivel DOM cuando el campo de formulario pierde el foco. El autocompletar debe responder más rápido que el “enfoque perdido”, por lo que debe vincularse a un evento clave.

Haciendo esto:

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

Causará un error si el usuario vuelve a escribir la opción exacta que estaba allí antes.

Aquí hay una solución relativamente limpia para otros que buscan este tema:

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

Por api.jqueryui.com/autocomplete/ , esto une una función al eventlistener. Se activa cuando el usuario selecciona un valor de la lista de autocompletar y cuando ingresa un valor manualmente. El disparador se dispara cuando el campo pierde el foco.

Debe bind manualmente el evento, en lugar de proporcionarlo como una propiedad del objeto de inicialización, para que esté disponible para trigger .

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

entonces

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

Es una solución temporal, pero estoy a favor de soluciones que mejoren la uniformidad semántica de la biblioteca.

El activador programáticamente para llamar al evento autocompletar.change es a través de un disparador de espacio de nombre en el elemento de selección de origen.

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

Dentro de la versión 1.8 de 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 ); }); 

La forma más sencilla y más sólida es usar el ._trigger interno () para activar el evento de cambio de autocompletar.

 $("#CompanyList").autocomplete({ source : yourSource, change : yourChangeHandler }) $("#CompanyList").data("ui-autocomplete")._trigger("change"); 

Tenga en cuenta que jQuery UI 1.9 cambió de .data (“autocompletar”) a .data (“ui-autocompletar”). También puede ver a algunas personas usando .data (“uiAutocomplete”) que de hecho funciona en 1.9 y 1.10, pero “ui-autocomplete” es la forma oficial preferida. Consulte http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys para jQuery UI namespaecing en claves de datos.

Intentaba hacer lo mismo, pero sin mantener una variable de autocompletar. Paso este controlador de cambio de llamada programáticamente en el evento de selección, solo tiene que preocuparse por el valor real de la entrada.

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

Bueno, para mí funciona solo vincular un evento de pulsación de tecla a la entrada de búsqueda, así:

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

Este parece ser el único que funcionó para mí.

Esta publicación es bastante antigua, pero para los que llegaron aquí en 2016 . Ninguno de los ejemplos aquí funcionó para mí. Usar el keyup lugar del cambio de autocompletechange hizo el trabajo. Usando jquery-ui 10.4

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

¡Espero que esto ayude!

Otra solución que los anteriores:

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

jQuery UI Autocomplete API

https://jsfiddle.net/mwneepop/