如何为jQuery实现标签插件

Question

目标：为我的rails应用程序实现jQuery插件（或在必要时自己写一个），在键入定界符后在文本周围创建一个“框”。

示例：在SO上加标签后，用户开始输入标签，然后从提供的下拉列表中选择一个。 输入字段识别出已选择标签，放置一个空格，然后准备下一个标签。 同样，在尝试接受下一个标签/输入之前，我尝试使用此插件在先前输入的标签周围放置一个框。

README.txt中的说明似乎很简单，但是我一直在收到

$（“。tagbox”）。tagbox不是函数

使用Firebug调试我的应用时出现错误。

这是我的application.js中的内容：

$(document).ready( function(){

    $('.tagbox').tagbox({
        separator: /\[,]/  // specifying comma separation for <code>tags</code>
    });

});

这是我的_form.html.erb：

<% form_for @tag do |f| %>
  <%= f.error_messages %>
  <p>
    <%= f.label :name %><br />
    <%= text_field :tag, :name, { :method => :get, :class => "tagbox" } %>
  </p>

  <p><%= f.submit "Submit" %></p>
<% end %>

为了便于阅读，我省略了_form.html.erb和application.js中存在的其他代码（即，自动完成插件的实现）。 包含或排除此省略的代码不会影响此插件的性能。

我已经在我的application.html.erb文件的javascript_include_tag中包含了标签箱插件的所有必需文件（以及所有其他包含的JS文件之后的application.js）。

当jquery.tagbox.js清楚地定义了该函数并且包含在所讨论的html页面的开头时，为什么我会收到此“ not a function”错误，我非常困惑。 我为此插件苦苦挣扎的时间超过了我想承认的时间，因此我们将不胜感激。 而且，当然，我愿意接受您可能想到的任何其他插件或从零开始的建议。

这个标签盒插件似乎没有大量的文档或任何当前有效的示例。

另外要注意的是，我试图避免使用jrails。

谢谢你的时间

Answer 1

这是我用其他一些功能编写的另一个tagBox插件：

http://www.geektantra.com/2011/05/jquery-tagbox-plugin/

请看看是否有帮助。

Answer 2

确保以正确的顺序加载插件和Jquery。 在Jquery之前加载插件会导致这种类型的错误。 另外，请确保插件与您使用的JQuery版本兼容。 如果所有这些都正确，那么我将执行一个基本的JQuery函数以确保您正确的路径。 否则，请使用Firebug并尝试查找负载失败的位置。