jquery - 如何为 jQuery 实现标签插件

Question

目标:为我的 Rails 应用程序实现一个 jQuery 插件(或者自己编写一个，如有必要)，在键入分隔符后在文本周围创建一个“框”。

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

README.txt 中的说明看起来很简单，但是我已经收到了

$(".tagbox").tagbox is not a function

使用 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 中存在的一些其他代码(即自动完成插件的实现)。包含或排除此省略的代码不会影响此插件的性能。

我已将 tagbox 插件所需的所有文件(以及所有其他包含的 JS 文件之后的 application.js)包含在 application.html.erb 文件的 javascript_include_tag 中。

当 jquery.tagbox.js 明确定义了该函数并包含在相关 html 页面的头部时，我很困惑为什么会收到此“不是函数”错误。我在这个插件上挣扎的时间比我愿意承认的要长，所以任何帮助将不胜感激。当然，我愿意接受您可能想到的任何其他插件或从头开始的建议。

这个标签框插件似乎没有丰富的文档或任何当前工作的示例。

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

感谢您的宝贵时间

Answer 1

确保您以正确的顺序加载插件和 Jquery。在 Jquery 之前加载插件可能会导致此类错误。另外，请确保该插件与您正在使用的 JQuery 版本兼容。如果所有这些都是正确的，我将执行一个基本的 JQuery 函数来确保您的路径是正确的。否则，使用 firebug 并尝试追踪加载失败的位置。