单击第一项自动完成的jQuery jQuery UI

Question

I'm trying to click on the first item of the list that displays autocomplete after searching:

$(function(){
    $('#autocompleteplace').each(function(i, el) {
        var $this = $(el);
        $this.autocomplete({
            source: $this.data('urlp'),
            autoFocus: true,
            minLength: 1,
            select: function( event, ui ) {
                $('#' + $this.data('id')).val(ui.item.id);
            }
        });
        var region = '{{ form.vars.data.place.region|default('') }}';
        $this.autocomplete("search", region, true);
        var menu = $this.autocomplete("widget");

        $(menu[0].children[0]).click();
    });
});

This code is the same from here , which I tried in the same environment and it works. But in my example I get the data from the server, and it shows and selects the first item with autoFocus, but it doesn't click on it.

I just want to edit a post that uses a field with autocomplete (place), so when the form is shown I want it to have the place already selected.

Answer 1

I asked for a quick fix of that problem: retrieve the value of the item that its already stored, but it's easier and cleaner doing it in the form. My fix was modify the Transformer in my Symfony form. Since this is not a PHP topic, I'm not going into details.

In conclusion: there should be a better way to achieve that than forcing a click() event.