UI suggestions on how to display suggested tags for a given text to a user?

Question

I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.

I'm not quite certain what a friendly way to do this would be.

Edit:

Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)

---------------------------    # say they can checkoff or select tags they like.
| o[tag2]  x[foo]  o[moo] |
|   x[tag1]   o[bar]      |
---------------------------

Answer 1

The Google method is one option: an input textbox with suggestions listed drop-box style underneath.

Answer 2

del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.

With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.

Some other considerations that might factor into your decision:

• How many tags will you suggest at any given time? 2? 5? 10? 50?
• Should the user be forced to use your suggested tags only? Is entering their own a valid option?

Answer 3

If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.

See the working demo here: http://jsbin.com/ezifi

You can modify how the suggestions are presented by monkey-patching the render functions on the autocomplete widget.