Utilizing AutoComplete functionality in AngularJS with ngTagsInput

Question

Utilizing AutoComplete functionality in AngularJS with ngTagsInput

Using ngTagsInput in my project for tagging has posed a problem. After implementing the loadTags function to fetch data from an API and changing the structure to {text : sometag}, I encountered an issue where the autocomplete tag feature stopped working. I followed a tutorial at but still faced this issue.

Struggling with LoadTags Data Retrieval from API

$scope.loadTags = function(query) {
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
    data = {
        username: "newshubid",
        data: {
            orderby: {
                field: "label",
                type: "DESC"
            }
        }
    };
    args = {
        "data": JSON.stringify(data)
    };
    param = $.param(args);
    HttpService("POST", url, param, function(response) {
        res = angular.fromJson(response.data);
        angular.forEach(res, function(item) {
            $scope.get_cat = {
                text: item.label
            };
            return $scope.get_cat;
        });
    });
};

HTML Implementation

<tags-input ng-model="tag" class="bootstrap"
                                        replace-spaces-with-dashes="false"
                                        on-tag-added="AttachTag($tag)"
                                        on-tag-removed="RemovedTag($tag)">
        <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

If you have any insights on how to fix this issue or spot where I might have made a mistake, please share your thoughts. Thank you!

javascript angularjs arrays angularjs-http ng-tags-input

Answer 1

Answer №1

You've mistakenly utilized the incorrect ng-model binding for the tag data

To rectify this, consider defining $scope.get_cat as an array and pushing each tag into it.

$scope.loadTags = function(query) {
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
    data = {
        username: "newshubid",
        data: {
            orderby: {
                field: "label",
                type: "DESC"
            }
        }
    };
    args = {
        "data": JSON.stringify(data)
    };
    param = $.param(args);
    HttpService("POST", url, param, function(response) {
        res = angular.fromJson(response.data);
        $scope.get_cat = []
        angular.forEach(res, function(item) {
            $scope.get_cat.push({
                text: item.label
            });

        });
        return $scope.get_cat;
    });
};

Answer 2

You've mistakenly utilized the incorrect ng-model binding for the tag data

To rectify this, consider defining $scope.get_cat as an array and pushing each tag into it.

$scope.loadTags = function(query) {
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
    data = {
        username: "newshubid",
        data: {
            orderby: {
                field: "label",
                type: "DESC"
            }
        }
    };
    args = {
        "data": JSON.stringify(data)
    };
    param = $.param(args);
    HttpService("POST", url, param, function(response) {
        res = angular.fromJson(response.data);
        $scope.get_cat = []
        angular.forEach(res, function(item) {
            $scope.get_cat.push({
                text: item.label
            });

        });
        return $scope.get_cat;
    });
};

Answer 3

Answer №2

After carefully reviewing the ngTagsInput documentation, it is clear that a promise must be returned. I have made some adjustments to your code for you. The Angular $q service handles promises in this case. Make sure to inject $q into your controller to make it work.

$scope.loadTags = function(query) {
        var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
        data = {
            username: "newshubid",
            data: {
                orderby: {
                    field: "label",
                    type: "DESC"
                }
            }
        };
        args = {
            "data": JSON.stringify(data)
        };
        param = $.param(args);
        var deferred = $q.defer();
        HttpService("POST", url, param,
        function(response) {
            res = angular.fromJson(response.data);
            $scope.get_cat = []
            angular.forEach(res, function(item) {
                $scope.get_cat.push({
                    text: item.label
                });

            });
              deferred.resolve($scope.get_cat);
              return deferred.promise; 
        });
    };

Answer 4

After carefully reviewing the ngTagsInput documentation, it is clear that a promise must be returned. I have made some adjustments to your code for you. The Angular $q service handles promises in this case. Make sure to inject $q into your controller to make it work.

$scope.loadTags = function(query) {
        var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
        data = {
            username: "newshubid",
            data: {
                orderby: {
                    field: "label",
                    type: "DESC"
                }
            }
        };
        args = {
            "data": JSON.stringify(data)
        };
        param = $.param(args);
        var deferred = $q.defer();
        HttpService("POST", url, param,
        function(response) {
            res = angular.fromJson(response.data);
            $scope.get_cat = []
            angular.forEach(res, function(item) {
                $scope.get_cat.push({
                    text: item.label
                });

            });
              deferred.resolve($scope.get_cat);
              return deferred.promise; 
        });
    };

Utilizing AutoComplete functionality in AngularJS with ngTagsInput

Answer №1

Answer №2

Similar questions

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

The lightbox is triggered by clicking on a different div to display its content

Loading JS and CSS files in relation to the website root directory

Checking for valid single values in an array

Creating an autocomplete/autosuggestion feature using AJAX and displaying the results in a table separate from the form

JavaScript Calendar lacks two days

Eliminate duplicate elements within arrays stored in an object using Javascript

Importing a JSON file into a JavaScript script

Why am I getting an error in Node's mongoose saying that the function is undefined?

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Converting JSON into HTML has me completely baffled

Creating Dynamic Menus with Material UI

An error occurred during the extraction of nested JSON data in a SQL query

Modifying the $scope property on ng-click and redirecting with ui-sref

How can I prevent my service worker from caching text/html documents such as the index page?

How to implement form modal binding using Laravel and Vue.js

The outcome does not display default selected checkboxes

Sequentially traverse the tree in reverse preorder fashion