jQuery autocomplete in angularJS directive gets triggered even after selecting an option

Question

Below is the input box for which I want an autocomplete feature:

<input auto-complete-user ng-hide="searchFilter.AssignedToAnyOne" ng-model="searchFilter.FilterByUser"
                            placeholder="Name / Company name" type="text" id="txtFilterUser"
                            class="filterUser form-control input-sm" />

And the angularJS directive -

BTWebApp.directive('autoCompleteUser', function ($timeout) {
if (localStorage[1] != undefined) {
    return function (scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: JSON.parse(localStorage[1]),
            select: function () {
                $timeout(function () {
                    iElement.trigger('input');
                }, 0);
            }
        });
    };
}});

The autocomplete works fine, except that once I have selected an option from the list, the autocomplete triggers again, thereby prompting me the selected item again which is very annoying. When I remove the iElement.trigger('input'); however, it works fine but the model doesn't get updated.

I referred this jsFiddle before using it in my code, the problem only occurs when I use it in my project code, it works perfectly fine in that jsFiddle. I don't know what I'm missing here. Is this something to do with bootstrap or when localstorage is used? coz that's the only difference I find between my code and the jsFiddle. Please help.

score 0 · Answer 1 · edited May 23 '17 at 11:52

It's not local storage http://jsfiddle.net/leewinter/gxvsqkuy/2/ maybe try your example in a fiddle and see if it can be reproduced?

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
localStorage.setItem('testObject', JSON.stringify(testObject));
if (localStorage.getItem('testObject') != undefined) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
}});

Are you using IOS? Could try the following solution

$("#input").autocomplete({
open: function(event, ui) {
    $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
}});

jQuery autocomplete in angularJS directive gets triggered even after selecting an option

1 Answers1