How to get tagSource to work with $.ajax()? #13

Closed
krzkrzkrz opened this Issue Aug 2, 2011 · 13 comments

Comments

Projects
None yet
9 participants

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) {
        eturn data;
      }
    });
  }
});

Am I missing something here?

Anyone?

Is using tag-it with Ajax an open issue or what? i tried to ask about this on your Discuss page but my comment was never posted. Many thanks!

What Discuss page? It is an open issue. Example above does not load the tags via ajax

I tried to ask the developers for an example using Ajax in the Discussion section at the bottom of their homepage (http://aehlke.github.com/tag-it/) but my post didn't get posted. Have the developers acknowledged this is an open issue? Just curious before I give it a try myself using Ajax. Aside from using Ajax, I have the widget working for me.

It's an open issue on Github for this particular project, yes. I don't know if the developers have read it though.

Contributor

GUI commented Aug 18, 2011

The tagSource is a callback for jQueryUI's autocomplete widget. The callback function gets passed a function for jQueryUI's autocomplete that needs to be called in order to populate the results. I think all you're missing is calling that function inside your callback. So in this example, calling showChoices worked for me:

$(".tags").tagit({
  tagSource: function(search, showChoices) {
    $.ajax({
      url: "/example.json",
      data: search,
      success: function(choices) {
        showChoices(choices);
      }
    });
  }
});

While the above should work to perform Ajax calls, it might be worth noting that if you use a custom tagSource callback, existing tags won't be excluded from the autocomplete list (like they are when using availableTags by default). I don't know of an existing way around this, other than this pull request: #19 With that, you can then do ajax and provide the default behavior to exclude existing tags from the autocomplete results like so:

$(".tags").tagit({
  tagSource: function(search, showChoices) {
    var that = this;
    $.ajax({
      url: "/example.json",
      data: search,
      success: function(choices) {
        showChoices(that._subtractArray(choices, that.assignedTags()));
      }
    });
  }
});
Owner

aehlke commented Aug 31, 2011

Sorry, been super busy lately -- thanks for the detailed answer GUI, I'll have to add something to the docs about this (+ an example).

orl commented Oct 26, 2011

I've tried examples, suggested by GUI, but I have no success. Maybe I did something wrong? I receive the suggestions in pieces:

[
'
1
'
]

and so on...

orl - a couple things:

  1. make sure your content type on your response is application/json not text/html etc.
  2. if you ahve firebug, console.debug(choices); before you call showchoices.. make sure it really is a json array of strings, and not "a string" (because then each iterable item is actually a character).

my actual javascript function is something like this:
tagSource: function(search, showChoices) {
var that = this;
$.ajax({
url: baseUrl + "suggestTags.html",
data: search,
success: function(choices) {
var tagChoices = new Array();
$.each(choices, function(k,v){
if (v.name && v.name.match("^"+search.term)==search.term) {
tagChoices.push(v.name);
}
});
if (tagChoices.length > 0) {
showChoices(that._subtractArray(tagChoices, that.assignedTags()));
}
}
});
}

my result back is a json object like this:
[{'name', 'java'}, {'name', 'javascript'}](i know, non-optimal.. don't care hah)

I iterate through every result, make sure that v.name (which would equal say java).. I make sure that the search term they types in.. that is does a 'startsWith' (that is what that regex is)..

otherwise, if you call showChoices everytime.. a person can type in F and get results like java, javascript etc, since no limiting was done.

hope this helps!

I had the same problem, so here is a working example:

http://tag-it-autocomplete.heroku.com

The source with README is here:

https://github.com/makaroni4/tag-it-autocomplete

Hope that helps)

nardev commented Jul 14, 2012

What i see in your code is that you miss one letter :)

you wrote:

eturn data;

hi hi :D

Owner

aehlke commented Nov 25, 2012

Closing this, thanks again @makaroni4 for the example. I'll add an example to the docs at some point.

@aehlke aehlke closed this Nov 25, 2012

OnArs commented Sep 3, 2015

@aehlke pls give an example of autocomplete.source loaded by ajax

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment