When I select value from autocomplete, menu disappear and appear again in angularjs

Question

I am using angularjs and autocomplete (jquery-ui). when I select a value from the list of the menu that appear when I write in the textbox, the menu does not disappear. Here the code I am using:

<input type="text" name="indirizzo" data-ng-model="input.indirizzo" auto-complete ui-items="indirizzi" data-ng-model-options="{ updateOn: 'mousedown blur' }" />

Here the directive of angular:

.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: scope[iAttrs.uiItems],
            select: function() {
                $timeout(function() {
                    iElement.trigger('input');
                }, 0);
            }
        });
    };
})

Can anyone help me?

Thank you

UPDATE

I see that if I remove the following line from directive, the menu is correctly closed

iElement.trigger('input');

but in this way, my model is not updated.

UPDATE Perhaps I understood which is the problem. But I do not how to solve it. When I trigger the input event, it's like I focus on the input element of the Html. So when I focus on it, the menu is opened again. In fact if I see better, the menù is closed and immediately re-open.

Any suggestion?

You need to parse your input element of the html correctly based on hierarchical structure when you are using trigger. have a look at [this](http://stackoverflow.com/questions/24628410/how-can-i-trigger-the-click-event-of-another-element-in-ng-click-using-angularjs) — road2victory, Sep 02 '15 at 13:50
Yes, surely the problem is that line `iElement.trigger('input');`.. but I think the problem is not the input element that I am using trigger.. Infact when I debug it, I can see that `iElement` is my input element in the html... perhaps I trigger the wrong event? — Simone, Sep 02 '15 at 15:28
Thank you, @HarshMehta! You helped me to understand which the problem was. Below, the answer. — Simone, Sep 03 '15 at 07:44

Simone · Accepted Answer · 2015-09-03T07:56:20.990

1

Solved in this way. I have changed the code inside the "select" event of the automplete:

$timeout(function () {
    iElement.controller('ngModel').$setViewValue(iElement.val());
}, 0);

Trigger the 'input' reopened the menu.

edited Sep 03 '15 at 07:56

answered Sep 03 '15 at 07:45

Simone

2,304
6
30
79

When I select value from autocomplete, menu disappear and appear again in angularjs

1 Answers1