jQuery AutoComplete de Déclencher un Changement de l'Événement

cela va fonctionner,trop

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

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

Il est préférable d'utiliser l'événement select à la place. L'événement de changement est lié à keydown comme Wil l'a dit. Donc, si vous voulez écouter pour changer sur la sélection utiliser sélectionner comme cela.

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

ils se lient à keydown dans la source autocomplete, donc le déclenchement de keydown le mettra à jour.

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

ils ne sont pas liés à l'événement 'change' parce que cela ne se déclenche qu'au niveau du DOM lorsque le champ de forme perd sa focalisation. L'autocomplete doit répondre plus rapidement que' lost focus ' donc il doit se lier à un événement clé.

:

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

va causer un bug si l'utilisateur retape le l'option exacte qui était là avant.

Voici une solution relativement propre pour les autres qui cherchent ce sujet:

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

par api.jqueryui.com/autocomplete / , cela lie une fonction à l'eventlistener. Il est déclenché à la fois lorsque l'utilisateur sélectionne une valeur dans la liste autocomplete et lorsqu'il tape manuellement une valeur. Le déclencheur se déclenche lorsque le champ perd sa concentration.

vous devez manuellement bind l'événement, plutôt que de le fournir comme propriété de l'objet d'initialisation, pour le rendre disponible à trigger .

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

puis

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

c'est un peu une solution de contournement, mais je suis en faveur de solutions de contournement qui améliorent l'uniformité sémantique de la bibliothèque!

le déclencheur programmatique pour appeler l'autocomplete.l'événement de changement se fait via un déclencheur placé en namespace sur l'élément source select.

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

dans la version 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 );
            });

Le plus simple et le plus robuste consiste à utiliser l'interne ._trigger () pour lancer l'événement de changement autocomplete.

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

$("#CompanyList").data("ui-autocomplete")._trigger("change");

Remarque, l'INTERFACE utilisateur de jQuery 1.9 changé depuis .de données("saisie semi-automatique").de données("ui-saisie semi-automatique"). Vous pouvez également voir certaines personnes utiliser .données ("uiAutocomplete") qui fonctionne en effet en 1.9 et 1.10, mais" ui-autocomplete " est la forme préférée officielle. Voir http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys pour jQuery UI namespaecing sur les données clés.

j'essayais de faire la même chose, mais sans garder une variable d'autocomplete. Je passe en revue ce gestionnaire de changement d'appel de façon programmatique sur l'événement select, vous n'avez qu'à vous soucier de la valeur réelle de l'entrée.

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

Eh bien, cela fonctionne pour moi juste liant un événement de keypress à l'entrée de recherche, comme ceci:

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

Cela semble être la seule qui a fonctionné pour moi.

ce post est assez vieux, mais pour ceux qui obtenu ici en 2016 . Aucun exemple ici a fonctionné pour moi. Utiliser keyup au lieu de autocompletechange a fait le travail. En utilisant jquery-ui 10.4

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

Espérons que cette aide!

une autre solution que les précédentes:

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

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

jQuery UI Autocomplete API

https://jsfiddle.net/mwneepop /