如何实现jQuery的标签插件

Goal: To implement a jQuery plugin for my rails app (or write one myself, if necessary) that creates a "box" around text after a delimiter is typed.

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

Example: With tagging on SO, the user begins typing a tag, then selects one from the drop-down list provided. The input field recognizes that a tag has been selected, puts a space and then is ready for the next tag. Similarly, I am attempting to use this plugin to put a box around the previously entered tag before moving to to accept the next tag/input.

示例:在这样的情况下，用户开始输入一个标记，然后从所提供的下拉列表中选择一个。输入字段识别一个标记已经被选中，并放置一个空格，然后为下一个标记做好准备。类似地，我正在尝试使用这个插件在前面输入的标签周围放一个方框，然后再移动到接受下一个标签/输入。

The instructions in the README.txt seem simple enough, however I have been receiving a

自述文件中的说明。txt看起来很简单，但是我收到了a

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

$(" .tagbox”)。tagbox不是函数

error when debugging my app with firebug.

使用firebug调试app时出错。

Here is what I have in my application.js:

以下是我在申请表中所拥有的。

$(document).ready( function(){

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

});

And here is my _form.html.erb:

这是我的_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 %>

I have omitted some other code (namely the implementation of an autocomplete plugin) existing within my _form.html.erb and application.js for sake of readability. The inclusion or exclusion of this omitted code does not affect the performance of this plugin.

我在我的_form.html中省略了一些其他的代码(即自动完成插件的实现)。erb和应用。为了便于阅读。包含或排除这个省略的代码不会影响这个插件的性能。

I have included all of the necessary files for the tagbox plugin (as well as application.js after all other included JS files) within the javascript_include_tag in my application.html.erb file.

我已经包含了标记框插件(以及应用程序)所需的所有文件。在我的application.html的javascript_include_tag中。erb文件。

I'm pretty much confused as to why I'd be getting this "not a function" error when jquery.tagbox.js clearly defines the function and is included in the head of my html page in question. I've been struggling with this plugin for longer than I'd like to admit, so any help would really be appreciated. And, of course, I'm open to any other plugins or from-scratch suggestions you may have in mind..

当jquery.tagbox时，为什么会出现“not a function”错误，这让我非常困惑。js清晰地定义了函数，并且包含在我的html页面的标题中。我在这个插件上挣扎的时间比我想承认的要长，所以任何帮助都是值得感激的。当然，我也愿意接受你可能想到的任何其他插件或从零开始的建议。

This tagbox plugin does not seem to have a wealth of documentation or any currently working examples.

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

Also to note, I'm trying to avoid using jrails.

同样需要注意的是，我试图避免使用jrails。

Thanks for your time

谢谢你的时间

2 个解决方案

#1

Make sure you are loading the plugin and Jquery in the correct order. Loading the plugin before Jquery can cause this type of error. Also, make sure the plugin is compatable with the JQuery version you are using. If all of that is correct, I would do a basic JQuery function to ensure that you path to it is correct. Else, use firebug and try to trace down where the load is failing.

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

#2

Heres another tagBox plugin I wrote with some additional features:

下面是我编写的另一个标签框插件，它有一些附加的特性:

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

Just see if it can help.

看看能不能帮上忙。

#1

#2