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});
}
});
}
});
});
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 indiv
's.As the easiest fix, wrap your tokens in
<li>
's, like below.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.