How to create a tagging system like on Stack Overflow or Quora

Question

I want to create a tagging system like seen here on Stack Overflow or on Quora. It'll be its own model, and I'm planning on using this autocomplete plugin to help users find tags. I have a couple of questions:

1. I want tags to be entirely user-generated. If a user inputs a new tag by typing it and pressing an "Add" button, then that tag is added to the db, but if a user types in an existing tag, then it uses that one. I'm thinking of using code like this:

   def create
   
   @video.tags = find_or_create_by_name(@video.tags.name)
   
   end
   

   Am I on the right track?

2. I'd like to implement something like on Stack Overflow or Quora such that when you click a tag from the suggested list or click an "Add" button, that tag gets added right above the text field with ajax. How would I go about implementing something like that?

I know this is kind of an open-ended question. I'm not really looking for the exact code as much as a general nudge in the right direction. Of course, code examples wouldn't hurt :)

Note I am NOT asking for help on how to set up the jQuery autocomplete plugin... I know how to do that. Rather, it seems like I'll have to modify the code in the plugin so that instead of the tags being added inside the text field, they are added above the text field. I'd appreciate any direction with this.

Answer 1

mbleigh's acts_as_taggable_on gem is a feature-complete solution that you should definitely look into a little more closely. The implementation is rock-solid and flexible to use. However, it is mostly concerned with attaching tags to objects, retrieving tags on objects, and searching for tagged items. This is all backend server stuff.

Most of the functionality you are looking to change (based on your comments) is actually related more to your front-end UI implementation, and the gem doesn't really do much for you there. I'll take your requests one-by-one.

1. If user inputs a new tag, that tag gets added, if user inputs an existing tag, the existing tag gets used. acts_as_taggable_on does this.
2. Click a tag from suggested list to add that tag. This is an implementation issue - on the back-end you'll need to collect the suggested list of tags, then display those in your presentation as links to your processing function.
3. Autocomplete as user enters potential tag. You'll use the jQuery autocomplete plugin against a list of items pulled off the tags table. With additional jQuery, you can capture when they've selected one of the options, or completed entering their new tag, and then call the processing function.
4. Restrict users to entering only one tag. This will be your UI implementation - once they've entered or selected a tag, you process it. If they enter two words separated by a comma, then before or during processing you have to either treat it as one tag, or take only the text up to the first comma and discard the rest.
5. When you process the addition of a tag, you will have to do two things. First, you'll need to handle the UI display changes to reflect that a tag has been entered/chosen. This includes placing the tag in the "seleted" area, removing it from the "available" display, updating any counters, etc. Second, you'll need to send a request to the server to actually add the tag to the object and persist that fact to the database (where the taggable gem will take over for you). You can either do this via an individual AJAX request per tag, or you can handle it when you submit the form. If the latter, you'll need a var to keep the running list of tags that have been added/removed and you'll need code to handle adding/removing values to that var.

For an example of saving tags while editing but not sending to server/db until saving a form, you might take a look at the tagging functionality on Tumblr's new post page. You can add/remove tags at will while creating the post, but none of it goes to the database until you click save.

As you can see, most of this is on you to determine and code, but has very little to do with the backend part. The gem will take care of that for you quite nicely.

I hope this helps get you moving in the right direction.