Tagging autocompletion trong rails

Tags không còn quá xa lạ đối với người dùng trên một hệ thống website.Và càng không xa lạ đối với các lập trình viên. Và một ý tưởng được đưa ra để hoàn thiện tính tiện ích của tags hơn nữa, đó chính là autocompletion. Ý tưởng là để hướng dẫn người dùng tới một danh sách các thẻ được xác định trước, có thể được lọc một cách dễ dàng. Và bây giờ hãy cùng thử trải nghiệm với tagging autocompletion.

rails new tagging_autocomplete -T Sau đó hãy thêm gem: gem 'bootstrap-sass' gem 'acts-as-taggable-on' Một cách để thêm các plugin JQuery bên ngoài vào ứng dụng Rails của bạn là sử dụng Rails Assets.

Bên cạnh việc thêm vào Gemfile của bạn: source 'https://rails-assets.org' do gem 'rails-assets-chosen' end Bạn cũng cần phải: Include following in application.js: //= require chosen Include following in application.css: *= require chosen Và sau đó chạy bundle install.

Tiếp theo, chúng ta sẽ cần tạo CRUD để quản lý các sản phẩm và thẻ: rails g scaffold Product name:string description:text rails g scaffold Tag name:string

rake acts_as_taggable_on_engine:install:migrations Sau đó hãy chạy migration :

rake db:migrate Bây giờ chúng ta cần thay đổi trong controller app/controllers/product_controller.rb

The index action: def index if params[:tag] @products = Product.tagged_with(params[:tag]) else @products = Product.all end end Cũng như product_params: def product_params params.require(:product).permit(:name, :description, :tag_list) end Trong model product.rb hãy thêm: acts_as_taggable Thêm tag_list fields trong view app/views/products/_form.html.erb: <%= f.label :tag_list, 'Tags (separated with comas)' %> <%= f.text_field :tag_list, class: 'form-control' %>

Để xem danh sách thẻ của bạn thêm <%= product.tag_list %>

Chúng tôi chỉ cần một vài bước để kết thúc với ứng dụng của chúng tôi. Để tự động hoàn thành, thư viện Chosen sẽ thực hiện việc nâng nặng, chúng ta chỉ cần thực hiện nó.

Một điều quan trọng mà chúng ta đã quên khi tạo di chuyển cho việc gắn thẻ là thiết lập các mối quan hệ của chúng ta trong mô hình thẻ vì vậy hãy sửa nó trong app / model / tag.rb: class Tag < ActiveRecord::Base has_many :taggings has_many :tags, through: :taggings end Chúng tôi cũng cần cho phép các tham số tag_ids trong product_params của chúng tôi def product_params params.require(:product).permit(:name, :description, :tag_list, :tag, { tag_ids: [] }, :tag_ids) end Thay đổi text_filed trong views/products/_form.html.erb: <%= f.label :tag_list, "Tags" %> <%= f.collection_select :tag_ids, Tag.order(:name), :id, :name, {}, {multiple: true} %> Và cuối cùng là khởi tạo chosen.js trong app/views/layouts/application.html.erb. (document).on('ready page:load', function () { ('#product_tag_ids').chosen({ allow_single_deselect: true, awidth: '100%' }) });