What is the best UI for selecting tags from a list of existing tags?

Question

I am using django-tagging. My model simply contains a field with a comma separated list of tags. I would like the user to be able to select tags from a list of already existing tags and also allow the user to add tags. Still resulting a comma-separated list of tags. How would I do that?

A pull down list doesn't work. I was thinking about simply listing all tags beneath the tag field and when a user clicks on an existing tag this is added to the tag field with a bit of javascript.

Other ideas are very welcome.

Answer 1

I think your proposal of showing all tags and allowing the user to select them individually is a sound approach. Delicious.com uses this exact interface and it works wonderfully.

Answer 2

Having a separate complete list is a good start. I would also suggest an autocomplete implementation while the user is typing a tag name into the box. This helps eliminate the problem of having Batman and Bat-man and Bat Man as three separate tags.

Answer 3

How about implementing it the same way Stack Overflow does for the ignored and interesting tags on the front page? Wait for the user to start typing, and as they do, fire off AJAX requests to the server and start returning the five most likely results, which you can then display in a hovering white box below the text box.

Answer 4

If you can use jquery there are several plugins to handle this and save you the JS coding:

Tag Suggest which can handle comma delimited tag lists and Autocomplete which also has the advantage of being used by Jannis Leidel's excellent autocomplete form widget for ForeignKey model fields