简体繁体 English

键入标签后，如何使标签显示为链接？

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

原文 2011-06-22 02:36:50 3 1 jquery/ html/ ruby-on-rails

Right now i am using acts-as-taggable-on for tags and rails3-jquery-autocomplete to auto complete the tags. 现在，我在标签上使用行为作为标签，并在rails3 -jquery-autocomplete中自动完成标签。 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! 谢谢！

1 个解决方案

It should be pretty simple and straightforward stuff with jquery if you write on your own. 如果您自己编写，那么使用jquery应该非常简单明了。 You will need these things - 您将需要这些东西-

A jquery observer set on input field, i guess .change will do the trick. 我在输入字段上设置了一个jQuery观察者，我想.change可以解决问题。
Then a javascript function update_tags(), which will be called by .change event of observer. 然后是javascript函数update_tags（），该函数将由观察者的.change事件调用。 This function will then update the a "div" tag just below the input field to update tags in it. 然后，此功能将更新输入字段正下方的“ div”标签，以更新其中的标签。
In update_tags() function, you just have to take all the data from input field with .val() function and then split them by spaces. 在update_tags（）函数中，您只需要使用.val（）函数从输入字段中获取所有数据，然后将它们按空格分开即可。 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. 现在遍历此数组以创建链接元素（标记），并将它们附加在输入字段下方的“ div”内。
After this what remains is to just add good css for those tags we appended inside the div. 在此之后，剩下的就是为我们附加在div中的那些标签添加良好的CSS。