Trying to get tag-it to work with an AJAX call

user_501171 0
Viewed 20983

Trying to get tag-it to work with an ajax call.

Everything works so far. Except, I am unable to assign a tagSource via an ajax call.

In firebug, the 'data' is returning:

["Ruby","Ruby On Rails"]

But its not showing up as I type into the input box.

$('.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;
      }
    });
  }
});

console.log(data) returns ["Ruby", "Ruby On Rails"].

Am I missing something here? Anyone else got this to work?

tag-it autocomplete jquery javascript
7 Answers

None of these answers worked as is for me, so I thought I would come back and post my code that does work.

var tagThis = $(".tagit");
tagThis.tagit({
    tagSource: function(search, showChoices) {
        $.ajax({
            url: "/tags/search",
            data: { search: search.term },
            dataType: "json",
            success: function(data) {
                var assigned = tagThis.tagit("assignedTags");
                var filtered = [];
                for (var i = 0; i < data.length; i++) {
                    if ($.inArray(data[i], assigned) == -1) {
                        filtered.push(data[i]);
                    }
                }
                showChoices(filtered);
            }
        });
    }
});

This code assumes the URL returns a JSON encoded string (an array of strings). It will then filter out any tags that have already been selected in the input. So they aren't repeated in the list. Otherwise, this works for me.

Thanks to the others for sending me on the right path.

user_10315690
Related