How can i make my tags appear as a link after typing it?

Question

Right now i am using acts-as-taggable-on for tags and rails3-jquery-autocomplete to auto complete the tags. Everything is set up but i want the effect so as soon as their done typing out a tag, underneath the text-box appears whatever tag they typed out just like when asking a question on this site.

Can anyone show me or point in the right direction to do it how this site did it?

Thank you!

Answer 1

It should be pretty simple and straightforward stuff with jquery if you write on your own. You will need these things -

• A jquery observer set on input field, i guess .change will do the trick.
• Then a javascript function update_tags(), which will be called by .change event of observer. This function will then update the a "div" tag just below the input field to update tags in it.
• In update_tags() function, you just have to take all the data from input field with .val() function and then split them by spaces. This will give you array of all the tags. Now iterate through this array to create link elements (tags) and append these inside a "div" below the input field.
• After this what remains is to just add good css for those tags we appended inside the div.

Even inspecting this site's tags html will also give good insight regarding css and html there.