如何为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中包含了tagbox插件的所有必要文件(以及所有其他包含的JS文件之后的application.js).

当jquery.tagbox.js清楚地定义函数并且包含在我的html页面的头部时,我很困惑为什么我会得到这个"非函数"错误.我一直在努力使用这个插件超过我想承认的时间,所以任何帮助都会非常感激.而且,当然,我对任何其他插件或您可能想到的从头开始的建议持开放态度.

此标记框插件似乎没有丰富的文档或任何当前工作的示例.

还要注意,我试图避免使用jrails.

谢谢你的时间

Answer 1

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