webentwicklung-frage-antwort-db.com.de

Wie lösen Sie ein automatisches "select" -Ereignis manuell in jQueryUI aus?

Ich verwende jQueryUI-Autovervollständigung, und ich habe eine Funktion, die dem select-Ereignis zugeordnet ist, z. B .:

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

Ich habe einen Sonderfall: Der Benutzer hat sich auf ein Element in der Dropdown-Liste für die automatische Vervollständigung konzentriert (aber nicht ausgewählt), und ich muss das Auswahlereignis manuell aus einer anderen Funktion auslösen. Ist das möglich? Wenn das so ist, wie?

31
Jon Lemmon

Folgendes hat für mich funktioniert:

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

Du könntest es tun:

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

Sie können es so machen, wie es das jQuery-Team in ihren Unit-Tests tut - siehe this answer

6

Rufen Sie einfach folgende Funktion auf

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();
    }
3
Rohit More

1-zeilige Lösung

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

Wenn wir speziell nach etwas suchen wollen:

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

oder nur

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

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

Von außen:

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

Ein Beispiel für die Einrichtung der Auswahlauslösung beim Drücken der horizontalen Pfeiltasten innerhalb eines "offenen" Autocomplete-Ereignisses:

$('#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');
            }
        });
    }
});

Leider hat diese schöne Art und Weise, wie man dieses Problem als "Erfolg" bezeichnet, bei meiner App in Chrom 140.0.835.200 nicht funktioniert

1
palmic

Ich habe einen sehr einfachen Weg gefunden, damit es funktioniert. Die obigen Antworten haben bei mir nicht funktioniert. 

Meine Eingabedefinition:

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

Die Autocomplete-Definition:

$('#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);
    }
}); 

Trigger it: Ich trigre von einem Ajax aus, der auf einer anderen Seite definiert ist. In der Ajax-Antwort stoße ich es einfach so aus:

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

Es funktionierte.

0
lauer