How do you trigger autocomplete “select” event manually in jQueryUI?

Question

I\'m using jQueryUI autocomplete, and I have a function mapped to the select event, e.g.:

$(\"#someId\").autocomplete({
    source: someData,
    select: fun         


        

Answer 1

If we want to trigger search of something particularly:

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

or just

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

$('#search-term').autocomplete({
    ...
    minLength: 0, // with this setting
    ...
});

Answer 2

I found very simple way to make it work. Answers above did not work for me.

My input definition:

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

The 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: I am triggering from an ajax defined in other page, I do not put the ajax here for simplicity. Inside the ajax response I just trigger it this way:

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

It worked.

Answer 3

From outside:

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

An example how to setup select triggering at pressing of horizontal arrows keys from inside of "open" autocomplete event:

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

Unfortunately that nice way how to solve this marked as "success" did not work at my app in chromium 140.0.835.200

Answer 4

1 line solution

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

Answer 5

Here's what worked for me:

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

Answer 6

$('#someId').data('uiAutocomplete')._trigger('select');