CODEWITHSUNDEEP
javascriptjqueryangularjs
Nitin
Nitin

Reputation: 941

Not able to search on enter key in tagsInput autocomplete Angular

I have integrated tagsInput for the autocomplete in angular js.

i have included file ng-tags-input.min and added below code in my view.

<tags-input ng-model="searchTerm"
                display-property="Name" 
                add-from-autocomplete-only="true"
                replace-spaces-with-dashes='false'
            placeholder="Search option"
              >
        <auto-complete source="loadTags($query)" min-length='3'></auto-complete>
    </tags-input>

also added code in controller for get data for auto complete

$scope.loadTags = function (query) {
                        if (query != undefined) {
                            var info = data;
                            var items = ($filter('filter')(info, {Name: query}));
                            return items;
                        } else {
                            return data;
                        }

                    }

Every going fine. i am getting all data in auto complete but the problem after selecting option i am not able to search on enter key press.

Upvotes: 2

Views: 722

Answers (1)

ciril sebastian
ciril sebastian

Reputation: 549

Could you please explain your problem again?. Whether do you have a problem to select the searched result by ENTER key press or auto complete serach is not working?

Here i am giving the sample code that we used.

<tags-input class="`tagsInput`" ng-model="ctrl.nameList" 
                                    display-property="fullName"
                                    key-property="name"
                                    min-length="1"
                                    max-tags="{{ctrl.Count}"
                                    min-tags="0"
                                    add-from-autocomplete-only="true"
                                    replace-spaces-with-dashes="false"
                                    placeholder="Add"
                                    enforce-max-tags>
                            <auto-complete source="ctrl.loadTags($query)"
                                           min-length="3"
                                           max-results-to-show={{ctrl.seletedListCount}}">
                            </auto-complete>
                        </tags-input>

and in your loadTags function

self.loadTags = function (query) {
            var deferred = $q.defer();
            someService.loadUsers(query).then(function (data) {
                if (data) {
                    self.seletedListCount = data ? data.length : 1000;
                    deferred.resolve(data);
                }
                else {
                    deferred.reject();
                }
            });
            return deferred.promise;
        };

Inside the loadTags, you can call the service and you can show the searched results. No need to search again by selecting the auto complete result and press enter

Upvotes: 1

Related Questions