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

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

The following has been implemented.

Slim introductionIntroduction of Bootstrap3 -Login function implementationImplementation of posting function

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


#Postscript
acts_as_taggable

4. Edit the controller

Add tag_list to the strong parameter.

books_controller.rb


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

4. Edit the view

slim:books/new.html.slim


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

tag_list.join(',') ➡︎ You can add multiple tags by separating them with commas (,).

slim:books/index.html.slim


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

Implementation of input completion function

1. Download and move the required files

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

** ② Click Clone or download ** スクリーンショット 2020-06-15 20.41.58.png

** ③ Click Download ZIP ** スクリーンショット 2020-06-15 20.42.03.png

** ④ Move 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`. スクリーンショット 2020-06-15 20.48.41.png

2. Introduce Gem

Gemfile


gem 'jquery-ui-rails'

Terminal


$ bundle

3. Edit ʻapplication.js`

application.js


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

4. Edit ʻapplication.scss`

application.scss


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

Recommended Posts

[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Tag management function (using acts-as-taggable-on)
[Rails] Implementation of automatic address input using jpostal and jp_prefecture
[Rails] Implementation of search function using gem's ransack
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of drag and drop function (with effect)
[Rails 6] Implementation of search function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of category function
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
Implementation of multiple word search, multiple model search, and multiple tag search (acts-as-taggable-on) of ransack
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
[Rails] Implementation of new registration function in wizard format using devise
[Rails] [jQuery] Asynchronous like function implementation using remote: true and js.erb
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
Implementation of user authentication function using devise (2)
Rails Addition of easy and easy login function
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of tabs using TabLayout and ViewPager
Implementation of user authentication function using devise (3)
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Vue.js] Implementation of menu function Vue.js introduction rails6
[Rails] I will explain the implementation procedure of the follow function using form_with.
[Rails] Implementation procedure of the function to tag posts without gem + the function to narrow down and display posts by tags
Implementation of Ruby on Rails login function (Session)
Add a tag function to Rails. Use acts-as-taggable-on
Tag function using acts-as-taggable-on on Devise My memo
[Rails] Implementation of retweet function in SNS application
[Nuxt / Rails] POST implementation using axios and devise_token_auth
[Rails] Implementation of batch processing using whenever (gem)
[Rails] Implementation of PV number ranking using impressionist
[Rails] Implementation of image slide show using Bootstrap 3
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Rails] Test of star evaluation function using Raty [Rspec]
Implementation of Ruby on Rails login function (devise edition)
Rails CRUD function implementation ② (edited and detailed this time)
Implementation of search function
[Ruby on Rails] Implementation of tagging function/tag filtering function
[rails] tag ranking function
Rails6: Input the initial data of ActionText using seed
Rails search function implementation
Implementation of pagination function
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
Try to implement tagging function using rails and js
Rails sorting function implementation (displayed in order of number of like)
[Rails] I tried to implement "Like function" using rails and js
Rails implementation of ajax removal
Rails fuzzy search function implementation