CODEWITHSUNDEEP
jqueryjsonautocomplete
Friendly Code
Friendly Code

Reputation: 1645

jQuery TagIt (autocomplete) Fetching JSON list via AJAX

This is a question based on: Trying to get tag-it to work with an AJAX call

However the above just creates an error message of 'this.source is not a function' for me.

I am trying to get this json list to appear as the tag source for tagit via ajax. Code below:

// Tagit
$("#tags").tagit({      
    tagSource: function() {
        $.ajax({
            url: "/admin/ajax.php?q=fetch_all_tags",
            dataType: "json",
            success: function(data) {
                console.log(data);
                return data;
            }
        });
    }       
});

The ajax call returns:

{"4":"php","2":"html","3":"css"}

Upvotes: 15

Views: 18334

Answers (6)

Kunal Rajput
Kunal Rajput

Reputation: 794

If you are newbie like me and don't understand the above solution here's a complete code

    $("#mySingleFieldTags").tagit({
      autocomplete: {
        source: function( request, response ) {
          console.log(request);
          $.ajax({
                url: "/autocomplete",
                dataType: "json",
                data: {
                  'search':request.term
                },
                success: function (data) {
                    response($.map(data, function (category) {
                      return {
                          label: category.name,
                        
                      };
                  }));
                }
            });
          }
      }
    });

Upvotes: 0

rjdmello
rjdmello

Reputation: 863

Check out this code may help you

$("#mytags").tagit({
    autocomplete: {
        source: function( request, response ) {
            /*call api*/
        }
    }
});

Upvotes: 19

cesar andavisa
cesar andavisa

Reputation: 340

I think that you can overwrite the autocomplete method from jquery UI :

<!-- language: lang-js -->

$('.tags ul').tagit({

    itemName: 'question',
    fieldName: 'tags',
    removeConfirmation: true,
    //availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
    allowSpaces: true,
    // tagSource: ['foo', 'bar']
    tagSource: function () {
        $.ajax({
            url: "/autocomplete_tags.json",
            dataType: "json",
            data: {
                term: 'ruby'
            },
            success: function (data) {
                console.log(data);
                return data;
            }

        });
    },
    autocomplete: {
        delay: 0,
        minLength: 2,
        source: this.tagSource()
    }
});

Upvotes: 3

cesar andavisa
cesar andavisa

Reputation: 340

The autocomplete.source should be overridden if you want to use custom autocompletion sources, like an Ajax / XHR response.

For example:

$("#myTags").tagit({
    autocomplete: {
       delay: 0,
       minLength: 2,
       source : 'your data response'
    }
});

Upvotes: 4

Illia Ratkevych
Illia Ratkevych

Reputation: 3711

You probably should use something like that for success handler:

success: function (categoriesList) {
    response($.map(categoriesList, function (category) {
        return {
            label: category.Name + " (ID: " + category.ID + ")",
            value: category.Name
        };
    }));
}

I'm displaying categories objects which have ID and Name properties.

Upvotes: 3

Friendly Code
Friendly Code

Reputation: 1645

This error was caused by me using an old version of tag it. If you get the same error make sure you are using the newest version of tagit

Upvotes: 2

Related Questions