web-dev-qa-db-fra.com

Comment déclencher manuellement l'événement "select" autocomplete dans jQueryUI?

J'utilise jQueryUI autocomplete et une fonction est mappée sur l'événement select, par exemple:

$("#someId").autocomplete({
    source: someData,
    select: function (event, ui) { ... },
    focus: function (event, ui) { ... }
});

J'ai un cas particulier: l'utilisateur s'est concentré sur un élément du menu déroulant autocomplétable (mais ne l'a pas sélectionné) et je dois déclencher l'événement select manuellement à partir d'une fonction différente. Est-ce possible? Si c'est le cas, comment?

jqueryjquery-uijquery-ui-autocomplete
31
Jon Lemmon

Voici ce qui a fonctionné pour moi:

$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
37
temuri

Vous pourriez faire:

$("#someId").trigger("autocompleteselect");
9
Nicola Peluchetti

Vous pouvez le faire comme l’équipe jQuery le fait dans leurs tests unitaires - voir ceci answer

6
Rune Vejen Petersen

Solution 1 ligne

$('.ui-menu-item .ui-corner-all:contains(\"123")').autocomplete({autoFocus:true}).mouseenter().click()
3
cegprakash

Si nous voulons déclencher la recherche de quelque chose en particulier:

$('#search-term').autocomplete('search', 'searching term');

ou juste

$('#search-term').autocomplete('search');

$('#search-term').autocomplete({
    ...
    minLength: 0, // with this setting
    ...
});
3
Alliswell
$('#someId').data('uiAutocomplete')._trigger('select');
3
kayz1

De dehors:

$($('#someId').data('autocomplete').menu.active).find('a').trigger('click');

Voici un exemple de configuration permettant de sélectionner le déclenchement lors de l’appui des touches de flèches horizontales à partir de l’événement de complétion automatique «ouvert»:

$('#someId').autocomplete({
    open: function(event, ui) {
        $(this).keydown(function(e){
            /* horizontal keys */
            if (e.keyCode == 37 || e.keyCode == 39) {
               $($(this).data('autocomplete').menu.active).find('a').trigger('click');
            }
        });
    }
});

Malheureusement, cette façon agréable de résoudre ce problème comme "succès" ne fonctionnait pas sur mon application en chrome 140.0.835.200

1
palmic

J'ai trouvé un moyen très simple de le faire fonctionner. Les réponses ci-dessus n'ont pas fonctionné pour moi. 

Ma définition d'entrée:

<div class="search_box">
<input type="text" class="inp disabled" id="search-user-id" placeholder="Search by user name or email" />
</div>

La définition de la complétion automatique:

$('#search-user-id').autocomplete({
    minChars: 3,
    paramName: 'searchTerm',
    deferRequestBy: 200, // This is to avoid js error on fast typing
    serviceUrl: '${pageContext.request.contextPath}/settings/reset/psw/query',
    type: 'POST',
    onSelect : function(suggestion) {
        showUserData(suggestion.dto);
    }, 
    onSearchError: function (query, jqXHR, textStatus, errorThrown) {
        $('.cev-error-fields.reset-password').find('.error_msg').text(errorThrown).show().fadeOut(7000);
    }
});

Déclenchez-le: Je déclenche un ajax défini dans une autre page, Je ne mets pas le ajax ici pour plus de simplicité. Dans la réponse ajax, je le déclenche simplement de cette façon:

        $('#search-user-id').val(username);
        $('#search-user-id').focus();

Ça a marché.

0
lauer