web-dev-qa-db-fra.com

Evénement de changement de déclencheur jQuery à saisie semi-automatique

Comment déclencher le gestionnaire d'événements de modification automatique de la saisie semi-automatique de jQuery UI par programmation?

Raccordement 

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

Tentatives diverses jusqu'à présent 

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

Sur la base d’autres réponses, cela devrait fonctionner:

Comment déclencher un événement jQuery change dans le code

jQuery Autocomplete et on Change problème

aide de la saisie semi-automatique JQuery

L'événement de modification se déclenche comme prévu lorsque j'interagis manuellement avec l'entrée de saisie semi-automatique via un navigateur; Cependant, je souhaite déclencher par programme l'événement change dans certains cas.

Qu'est-ce que je rate?

jquery-uiautocomplete
48
Chris Baxter

Voici. C'est un peu en désordre mais ça marche.

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

cela fonctionnera aussi

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

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

Il vaut mieux utiliser l'événement select à la place. L'événement de changement est lié à keydown comme l'a dit Wil. Donc, si vous voulez écouter le changement de sélection, sélectionnez-le.

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

Ils se lient à keydown dans la source de saisie semi-automatique, donc le déclenchement de la keydown sera mis à jour.

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

Ils ne sont pas liés à l'événement 'change' car cela ne se déclenche au niveau du DOM que lorsque le champ de formulaire perd le focus. La saisie semi-automatique doit répondre plus rapidement que la "perte de focus" et doit donc être liée à un événement clé.

Ce faisant:

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

Cela causera un bogue si l’utilisateur retape l’option exacte qui était là auparavant.

13
Will Shaver

Voici une solution relativement propre pour les autres personnes cherchant 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 à eventlistener. Il est déclenché lorsque l'utilisateur sélectionne une valeur dans la liste de saisie semi-automatique et lorsqu'il saisit manuellement une valeur. La gâchette se déclenche lorsque le champ perd le focus.

10
Skyhawk637

Vous devez manuellement bind l'événement, plutôt que de le fournir en tant que propriété de l'objet d'initialisation, pour le rendre disponible pour 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!

3
Potatoswatter

La méthode la plus simple et la plus robuste consiste à utiliser la méthode interne ._trigger () pour déclencher l'événement de modification autocomplete.

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

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

Remarque: jQuery UI 1.9 est passé de .data ("autocomplete") à .data ("ui-autocomplete"). Vous pouvez également voir certaines personnes utiliser .data ("uiAutocomplete") qui fonctionne effectivement dans les versions 1.9 et 1.10, mais "ui-autocomplete" est la forme officielle préférée. Voir http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys pour la jauge de noms jQuery UI sur des clés de données.

3
Chris Kinsella

Le déclencheur par programme d'appeler l'événement autocomplete.change se fait via un déclencheur namespaced sur l'élément select source.

$("#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 );
});
3
Peter O Brien

J'essayais de faire la même chose, mais sans garder une variable de saisie semi-automatique. Je parcours programme par programme le gestionnaire de changement d'appel 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();
    }
});
2
Perazzo

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

... Instantiate your autofill here...

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

Une autre solution que les précédentes:

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

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

API de saisie semi-automatique de l'interface utilisateur jQuery

https://jsfiddle.net/mwneepop/

0
Kaymaz

Cet article est assez vieux, mais pour ceux qui arrivé ici en 2016. Aucun des exemples ici n'a fonctionné pour moi. Utiliser keyup au lieu de autocompletechange a été efficace. En utilisant jquery-ui 10.4

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

J'espère que cette aide!

0
Merlin
$('#search').autocomplete( { source: items } );
$('#search:focus').autocomplete('search', $('#search').val() );

Cela semble être le seul qui a fonctionné pour moi.

0
RootBit0001