Positioning input box of tokeninput

429 Views Asked by At

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});
                }
                });
                }                             
        });
                                                                                    });
1

There are 1 best solutions below

0
On

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.