如何向 Rails 中的现有模型添加自动完成标记？

Question

我正在尝试将“标签”添加到 Rails 3 应用程序中的 Article 模型中。

我想知道是否有一个 gem 或插件在模型中添加了“标记”功能以及视图的自动完成帮助程序。

我找到了 acts_as_taggable 但我不确定这是否是我应该使用的。有更新的东西吗？当我用 google 搜索 acts_as_taggable 时，我得到了 2007 年的结果

Answer 1

acts_as_taggable_on 和 rails3-jquery-autocomplete 可以很好地协同工作，以创建类似标记系统的 SO，请参见下面的示例。我认为 Rails 尚不存在合适的多合一选项。

按照以下步骤完成全部安装：

1 .备份您的 Rails 应用程序！

2.安装 jquery-rails

注意：您可以使用 jquery-rails 但我选择不这样做。

3.下载并安装 jQuery UI

选择一个与您的网页设计相得益彰的主题（请务必使用该主题测试自动完成演示你选择，默认主题不适合我）。下载自定义 zip 并将 [zipfile]/js/jquery-ui-#.#.#.custom.min.js 文件放入应用的 /public/javascripts/ 文件夹。将 [zipfile]/css/custom-theme/ 文件夹和所有文件放入应用的 public/stylesheets/custom-theme/ 文件夹中。

4.将以下内容添加到您的 Gemfile 中，然后运行“bundle install”

gem '充当可标记'
gem 'rails3-jquery-autocomplete'

5 。从控制台运行以下命令：

rails 生成 actions_as_taggable_on:migration
耙数据库：迁移
Rails 生成自动完成：安装

在您的应用程序中进行这些更改

在应用程序布局中包含必要的javascript和css文件：

<%= stylesheet_link_tag "application", "custom-theme/jquery-ui-1.8.9.custom" %>  
<%= javascript_include_tag :defaults, "jquery-ui-#.#.#.custom.min", "autocomplete-rails" %>

控制器示例

编辑：根据Seth Pellegrino的进行更改评论。

class ArticlesController < Admin::BaseController  
  #autocomplete :tag, :name  <- Old   
  autocomplete :tag, :name, :class_name => 'ActsAsTaggableOn::Tag' # <- New
end

模型示例

class Article < ActiveRecord::Base
   acts_as_taggable_on :tags
end

Route.rb

resources :articles do
  get :autocomplete_tag_name, :on => :collection    
end

查看示例

<%= form_for(@article) do |f| %>
  <%= f.autocomplete_field :tag_list, autocomplete_tag_name_articles_path, :"data-delimiter" => ', ' %> 
  # note tag_list above is a virtual column created by acts_as_taggable_on
<% end %> 

注意：此示例假设您仅在整个应用程序中标记一个模型，并且您仅使用默认标签类型：tags。基本上，上面的代码将搜索所有标签，而不是将它们限制为“文章”标签。

Answer 2

acts_as_taggable_on_steroids 宝石可能是您最好的选择。我发现许多标记宝石更像是一个“良好的起点”，但随后需要大量的自定义才能获得您想要的结果。

Answer 3

我最近写了一篇关于此的博客文章；为了简洁起见，我的方法允许您拥有（可选）上下文过滤的标签（例如按模型和模型上的属性），而@Tim Santeford的解决方案将为您提供所有标签模型（未按字段过滤）。以下是逐字帖。

---

我尝试了 Tim Santeford 的解决方案，但问题出在标签结果上。在他的解决方案中，您将获得通过自动完成返回的所有现有标签，并且范围不限于您的模型和可标记字段！因此，我想出了一个在我看来更好的解决方案；它可以自动扩展到您想要标记的任何模型，它非常高效，而且最重要的是它非常简单。它使用 acts-as-taggable-on gem 和 select2 JavaScript 库。

安装 Acts-As-Taggable-On gem

1. 将 actions-as-taggable-on 添加到 Gemfile 中： gem 'acts-as-taggable-on', '~>; 3.5'
2. 运行 bundle install 来安装它
3. 生成必要的迁移： rakeacts_as_taggable_on_engine:install:migrations
4. 使用 rake db:migrate 运行迁移代码>

完成！

在 MVC 中设置正常标记

假设我们有一个 Film 模型（因为我有）。只需将以下两行添加到您的模型中：

class Film < ActiveRecord::Base
    acts_as_taggable
    acts_as_taggable_on :genres
end

模型就这样了。现在到控制器上。您需要接受参数中的标签列表。因此，我的 FilmsController 中有以下内容：

class FilmsController < ApplicationController
    def index
        ...
    end
    ...

    private

    def films_params
        params[:film].permit(..., :genre_list)
    end
end

请注意，该参数不是我们在模型中指定的 genres 。不要问我为什么，但acts-as-taggable-on需要singular + _list，而这正是视图中所需要的。

进入视图层！我使用 SimpleForm gem 和 Slim 视图模板引擎，因此如果您不使用 gem，我的表单可能看起来与您的表单略有不同。但是，它只是一个普通的文本输入字段：

= f.input :genre_list, input_html: {value: @film.genre_list.to_s}

您需要设置了该值的input_html属性，以便将其呈现为逗号分隔的字符串（这就是作用- as-taggable-on 期望在控制器中）。现在，当您提交表单时，标记应该可以使用！如果它不起作用，我建议观看（令人惊叹的）Ryan Bates 的 Railscast 关于标记的剧集。

将 select2 集成到您的表单中

首先，我们需要包含 select2 库；您可以手动包含它，或者使用（我的偏好）打包的 select2-rails gem select2 作为 Rails 资产管道。

将 gem 添加到 Gemfile 中：gem 'select2-rails', '~>; 4.0'，然后运行bundle install。

在您的资源管道中包含 JavaScript 和 CSS：

在 application.js 中：//= require select2-full。在application.css中：*= require select2。

现在您需要稍微修改一下表单以包含 select2 期望的标记内容。这看起来有点令人困惑，但我会解释一切。将之前的表单输入更改

= f.input :genre_list, input_html: {value: @film.genre_list.to_s}

为：

= f.hidden_field :genre_list, value: @film.genre_list.to_s
= f.input :genre_list,
    input_html: { id: "genre_list_select2",
                name: "genre_list_select2",
                multiple: true,
                data: { taggable: true, taggable_type: "Film", context: "genres" } },
    collection: @film.genre_list

我们添加一个隐藏输入，它将充当发送到控制器的实际值。 Select2 返回一个数组，其中acts-as-taggable-on 需要一个逗号分隔的字符串。当其值发生变化时，select2 表单输入将转换为该字符串，并设置到隐藏字段中。我们很快就会谈到这一点。

f.input 的 id 和 name 属性实际上并不重要。它们只是不能与您的隐藏输入重叠。 data 哈希在这里非常重要。 taggable 字段允许我们使用 JavaScript 一次性初始化所有 select2 输入，而不是通过 id 手动初始化每个输入。 taggable_type 字段用于过滤特定模型的标签，context 字段用于过滤该字段中之前使用过的标签。最后，collection 字段只是在输入中设置适当的值。

下一部分是 JavaScript。我们需要初始化整个应用程序中的所有 select2 元素。为此，我只需将以下函数添加到我的 application.js 文件中，以便它适用于每个路由：

// Initialize all acts-as-taggable-on + select2 tag inputs
$("*[data-taggable='true']").each(function() {
    console.log("Taggable: " + $(this).attr('id') + "; initializing select2");
    $(this).select2({
        tags: true,
        theme: "bootstrap",
        width: "100%",
        tokenSeparators: [','],
        minimumInputLength: 2,
        ajax: {
            url: "/tags",
            dataType: 'json',
            delay: 100,
            data: function (params) {
                console.log("Using AJAX to get tags...");
                console.log("Tag name: " + params.term);
                console.log("Existing tags: " + $(this).val());
                console.log("Taggable type: " + $(this).data("taggable-type"));
                console.log("Tag context: " + $(this).data("context"));
                return {
                    name: params.term,
                    tags_chosen: $(this).val(),
                    taggable_type: $(this).data("taggable-type"),
                    context: $(this).data("context"),
                    page: params.page
                }
            },
            processResults: function (data, params) {
                console.log("Got tags from AJAX: " + JSON.stringify(data, null, '\t'));
                params.page = params.page || 1;

                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.name,
                            // id has to be the tag name, because acts_as_taggable expects it!
                            id: item.name
                        }
                    })
                };
            },
            cache: true
        }
    });
});

这可能看起来很复杂，但并不太困难。基本上，$("*[data-taggable='true']") 选择器只是获取数据中设置了 taggable: true 的每个 HTML 元素。我们刚刚将其添加到表单中，这就是为什么 - 我们希望能够为所有可标记字段初始化 select2。

剩下的只是AJAX相关的代码。本质上，我们使用参数 name、taggable_type 和 context 对 /tags 进行 AJAX 调用。听起来很熟悉吗？这些是我们在表单输入中设置的数据属性。当结果返回时，我们只需为 select2 提供标签的名称即可。

现在您可能会想：我没有 /tags 路线！。你说得对！但您即将:)

添加 /tags 路由

进入 routes.rb 文件并添加以下内容：resources :tags。您不必为标签添加所有路由，但我这样做是为了可以轻松地使用 CRUD 标签。您也可以简单地执行以下操作： get '/tags' => 'tags#index'

这确实是我们目前需要的唯一路线。现在我们有了路由，我们必须创建一个名为 TagsController 的控制器：

class TagsController < ApplicationController
    def index
        @tags = ActsAsTaggableOn::Tag
                .where("name ILIKE ?", "%#{params[:name]}%")
                .where.not(name: params[:tags_chosen])
                .includes(:taggings)
                .where(taggings: {taggable_type: params[:taggable_type]})
        @tags = @tags.where(taggings: {context: params[:context] }) if params[:context]
        @tags.order!(name: :asc)
        render json: @tags
    end
end

这相当简单。我们可以向 /tags 发送请求，参数为 name （标签文本）、tags_chosen （现有选定的标签）、taggable_type（标记的模型）和可选的上下文（标记的字段）。如果我们有“喜剧”和“阴谋”的流派标签，然后在表单中输入 co，呈现的 JSON 应该如下所示：

[
    {
        "id": 12,
        "name": "comedy",
        "taggings_count": 1
    },
    {
        "id": 11,
        "name": "conspiracy",
        "taggings_count": 1
    }
]

现在，在 select2 输入中，您应该看到“喜剧”和“阴谋”作为自动完成的标签选项！

我的标签无法保存！

还有最后一步。我们需要将 select2 值设置到我们之前创建的 hidden 字段中。

根据您构建表单的方式，此代码可能会有所不同，但您本质上想要获取 select2 输入，将字符串数组转换为 CSV 字符串（例如 ["comedy", "conspiracy"] --> "comedy, conspiracy")，并将该 CSV 字符串设置到隐藏字段中。幸运的是，这并不是太难。

您可以捕获 select2 输入更改事件，或任何其他适合您的事件。这是您的选择，但必须执行此步骤以确保 Rails 控制器正确接收值。同样，在 application.js 中：

/*
* When any taggable input changes, get the value from the select2 input and
* convert it to a comma-separated string. Assign this value to the nearest hidden
* input, which is the input for the acts-on-taggable field. Select2 submits an array,
* but acts-as-taggable-on expects a CSV string; it is why this conversion exists.
*/
$(document).on('select2:select select2:unselect', "*[data-taggable='true']", function() {

    var taggable_id = $(this).attr('id')
    // genre_list_select2 --> genre_list
    var hidden_id = taggable_id.replace("_select2", "");
    // film_*genre_list* ($= jQuery selectors ends with)
    var hidden = $("[id$=" + hidden_id + "]")
    // Select2 either has elements selected or it doesn't, in which case use []
    var joined = ($(this).val() || []).join(",");
    hidden.val(joined);
});

成功转换值后，您应该在控制器操作中看到以下内容："genre_list"=>"comedy,conspiracy"

并且这就是您使用acts-as-taggable-on 和select2 在Rails 中执行自动完成标记所需的全部内容！