[Java] [Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it

1 minute read

Target

ezgif.com-video-to-gif.gif

Development environment

・Ruby: 2.5.7 Rails: 5.2.4 ・Vagrant: 2.2.7 ・VirtualBox: 6.1 ・OS: macOS Catalina

Premise

Implemented below.

Slim introductionBootstrap3 installedImplementation of login functionPosting function implementation

Implementation of tag function

1. Introduce Gem

Gemfile


gem'acts-as-taggable-on'

Gemfile


$ bundle

2. Add table

terminal


$ rails acts_as_taggable_on_engine:install:migrations

terminal


$ rails db:migrate

schema.rb


create_table "taggings", force: :cascade do |t|
  t.integer "tag_id"
  t.string "taggable_type"
  t.integer "taggable_id"
  t.string "tagger_type"
  t.integer "tagger_id"
  t.string "context", limit: 128
  t.datetime "created_at"
  t.index ["context"], name: "index_taggings_on_context"
  t.index ["tag_id", "taggable_id", "taggable_type", "context", "tagger_id", "tagger_type"], name: "taggings_idx", unique: true
  t.index ["tag_id"], name: "index_taggings_on_tag_id"
  t.index ["taggable_id", "taggable_type", "context"], name: "taggings_taggable_context_idx"
  t.index ["taggable_id", "taggable_type", "tagger_id", "context"], name: "taggings_idy"
  t.index ["taggable_id"], name: "index_taggings_on_taggable_id"
  t.index ["taggable_type"], name: "index_taggings_on_taggable_type"
  t.index ["tagger_id", "tagger_type"], name: "index_taggings_on_tagger_id_and_tagger_type"
  t.index ["tagger_id"], name: "index_taggings_on_tagger_id"
end

create_table "tags", force: :cascade do |t|
  t.string "name"
  t.datetime "created_at"
  t.datetime "updated_at"
  t.integer "taggings_count", default: 0
  t.index ["name"], name: "index_tags_on_name", unique: true
end

3. Edit the model

book.rb


# Addition
acts_as_taggable

4. Edit controller

Add tag_list to the strong parameters.

books_controller.rb


def book_params
  params.require(:book).permit(:title, :body, :tag_list)
end

4. Edit view

slim:books/new.html.slim


/ Addendum
= f.label :tag_list,'tag'
br
= f.text_field :tag_list, value: @book.tag_list.join(','), id:'tags'
br

tag_list.join(',') ➡︎ Multiple tags can be added by separating them with commas (,).

slim:books/index.html.slim


/ Addendum
td
  -book.tag_list.each do |tag|
    span.label.label-default style='margin-right: 10px;'
      = tag

Implementation of input completion function

1. Download required files and move

** ① Access the following link ** tag-it GitHub

** Click on Clone or download ** ![Screenshot 2020-06-15 20.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/9b1fbec6-0122-79f8-af89-(7b7b05a88be3.png)

③ Click Download ZIP Screenshot 2020-06-15 20.42.03.png

** Move the file **

  1. Unzip the downloaded file.

  2. Place jquery.tagit.css and tagit.ui-zendesk.css in the css folder under assets/stylesheets.

  3. Place tag-it.js in the js folder under assets/javascripts. Screenshot 2020-06-15 20.48.41.png

2. Introduce Gem

Gemfile


gem'jquery-ui-rails'

terminal


$ bundle

3. Edit the application.js

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jquery-ui // add
//= require bootstrap-sprockets
//= require tag-it
//= require_tree.

4. Edit application.scss

application.scss


/*
 *= require_tree.
 *= require jquery.tagit // add
 *= require tagit.ui-zendesk // Add
 *= require_self
*/