JqueryUI tagit - how can I suppress the new entry text field from appearing?

Question

For the JqueryUI tag-it widget, I'd like to completely prevent the new extra text entry field from appearing. I'm pre-populating with existing tags, and I'd just like to allow people to delete tags but not enter them.

I can make the new field read-only, but the field remains visible in IE and in both IE and Firefox clicking in the area of the widget causes the cursor to focus on that field.

What I'd like to do is get rid of the extra input field altogether.

There doesn't seem to be a tagit property for this associated with the .tagit() method. Is there something else I can do to prevent the extra field from being created?

Thanks,

doug

Answer 1

Try this:

$('#tagit').tagit({
//options
}).ready(function() {
    $(this).find('.tagit-new').css('height', '13px').empty();
});

Using firebug we can see that the input field created by tagit is in a li element with class tagit-new. We need to set the height otherwise the tag container will squash to a slither when the last tag is deleted, and then we can empty() this to get rid of the tag input field.