I've used a ticketing system called Lighthouse App for a while now, and one of the features I really like about it is its ability to tag content with keywords in a very easy and obvious fashion.

If you have ever wanted to tag an article or some content with a list of Keywords then this blog article is for you.

The idea with this functionality is that we are going to enable users with the ability to tag content with chosen keywords. We will give them a list of keywords and they will be able to simply click on any of them, and they will be added to a form field that is associated with the content they are concerned with.

The Code

All I am doing here is using JQuery to intercept all the hyperlinks within the 'existing-keyword-holder' div and picking up their value and inserting it into the form field (with an added space character). You could make this comma separated if you like. I've also added a basic highlight / fade effect to jazz it up a little.

The keywords a user can select from will initially be populated from a query. When a user submits the list I'll check it server side to see if they have added any new keywords manually. If they have then these will be added to the master list, in this way we are keeping things up-to-date, and the new keywords will appear in the main list when the page next loads.

There is an example of this working here:

Dynamically adding keywords to a field using JQuery