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.