Comment déclenchez-vous l'événement autocomplete "select" manuellement dans jQueryUI?
J'utilise la saisie semi-automatique jQueryUI, et j'ai une fonction mappée à 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 dans la liste déroulante de saisie semi-automatique (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 oui, comment?
9 réponses
Voici ce qui a fonctionné pour moi:
$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
Vous pourriez faire:
$("#someId").trigger("autocompleteselect");
Vous pouvez le faire comme l'équipe jQuery le fait dans leurs tests unitaires-voir Cette Réponse
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
...
});
Appelez simplement la fonction suivante
setAutocomplete("#txt_User_Name","rohit");
function setAutocomplete(autocompleteId,valuetoset)
{
$(autocompleteId).val(valuetoset);
$(autocompleteId).autocomplete("search", valuetoset);
var list = $(autocompleteId).autocomplete("widget");
$(list[0].children[0]).click();
}
De l'extérieur:
$($('#someId').data('autocomplete').menu.active).find('a').trigger('click');
Un exemple de configuration du déclenchement de sélection en appuyant sur les flèches horizontales depuis l'intérieur de l'événement de saisie semi-automatique "Ouvrir":
$('#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 belle façon de résoudre ce marqué comme "succès" n'a pas fonctionné à mon application dans chromium 140.0.835.200
1 ligne solution
$('.ui-menu-item .ui-corner-all:contains(\"123")').autocomplete({autoFocus:true}).mouseenter().click()
J'ai trouvé un moyen très simple de le faire fonctionner. Les réponses ci-dessus ne fonctionnaient pas 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 saisie semi-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 à partir d'un ajax défini dans une autre page, Je ne mets pas l'ajax ici pour plus de simplicité. À l'intérieur de la réponse ajax, je le déclenche de cette façon:
$('#search-user-id').val(username);
$('#search-user-id').focus();
Ça a marché.