Positioning input box of tokeninput

Question

Im kinda stuck with jQuery tokeninput, i've hacked it so it works great with adding FreeTags to the database and return the id and the name for the new tag. Now i have another problems, its with positioning the input auto-complete area, the input area is always "behind" the tokens, i want it to be in front of the tokens.

I would really appreciate if someone can give me a helping hand :)

if it is of any help, here my code so far.

                                                                                            $("#xxx").tokenInput("/get-tags", {
            theme: "facebook",
            noResultsText: "Hit enter to add",
            searchingText: "Searching",
            placeholder: 'Tags',
            freeTaggingHint: true,
            propertyToSearch: 'name',
            allowFreeTagging: true,
tokenFormatter: function(item) { return "<p name=\"tags[]\" value=\""+item.id+"\">"+item.name+"</p>";  },                       
            onFreeTaggingAdd: function (item) {
                    $.ajax({
        type: "POST",
        url: "/dev/ajax/add-tag/",
        data: {
            tag: item,
            uid: 1
            },
            success: function(data) {
                console.log(data);
                jQuery("#tags").tokenInput("add", {id: data, name: item});
                }
                });
                }                             
        });
                                                                                    });

How do you mean 'behind the tokens'? As in, to the left of them, or z-index behind? Can you knock together a jsfiddle, or post an image if that's appropriate? — Chris, Sep 05 '13 at 09:49

score 0 · Answer 1 · answered Sep 12 '13 at 15:32

I believe your problem may be to do with you TokenFormatter function. Various parts of jQuery library rely on tokens being <li>'s - I found this when I wrapped my tokens in div's.

As the easiest fix, wrap your tokens in <li>'s, like below.

tokenFormatter: function(item) { 
   return "<li><p name=\"tags[]\" value=\""+item.id+"\">"+item.name+"</p></li>";  
},

If that messes with your layout or something, then you'll need to go through an change a number of references in the library itself, which is a much bigger job.

Positioning input box of tokeninput

1 Answers1