[RUBY] Création d'une fonction de saisie semi-automatique à l'aide d'actes-comme-taggable-on et Tagit.js

Système complet

Environnement de développement

ubuntu(WSL)
Rails 6.0.2
Ruby 2.5.1

Préparation préalable

--Création d'une fonction de balise --Création d'une fonction de publication (CRUD) Veuillez vous référer à ici pour créer la fonction de balise.

Introduction de Tagit

Exécutez la commande suivante et placez-la dans vendor / assets. Si vous n'avez pas de vendeur / actifs, créez-en un vous-même.

curl https://raw.githubusercontent.com/aehlke/tag-it/master/js/tag-it.js -o vendor/assets/javascripts/tag-it.js

curl https://raw.githubusercontent.com/aehlke/tag-it/master/css/jquery.tagit.css -o vendor/assets/stylesheets/jquery.tagit.css

curl https://raw.githubusercontent.com/aehlke/tag-it/master/css/tagit.ui-zendesk.css -o vendor/assets/stylesheets/tagit.ui-zendesk.css

Puisque Jqury est utilisé, veuillez ajouter jqury-ui-rails au Gemfile.

Gemfile.

gem 'ransack'
gem 'acts-as-taggable-on', '~> 6.0'
gem 'jquery-ui-rails' #ajouter à

Ajoutez ce qui suit à ʻapplication.js et ʻapplication.scss pour charger Tagit et JquryUi. Je vais tous les mettre pour le moment.

application.js

//= require jquery #ajouter à
//= require rails-ujs　#ajouter à
//= require popper
//= require turbolinks　#ajouter à
//= require_tree .　#ajouter à
//= require bootstrap
//= require activestorage
//= require jquery-ui/widgets/autocomplete　#ajouter à
//= require tag-it　#ajouter à

application.scss

/*
 *= require_tree . #ajouter à
 *= require jquery.tagit #ajouter à
 *= require tagit.ui-zendesk #ajouter à
 *= require_self #ajouter à
*/

Créez une zone de texte. Ajoutez un identifiant arbitraire dans le bloc form_for. Si vous ajoutez id à f.text_field, deux champs de texte seront créés, alors ajoutez id à .form-group.

views/micropost/_form.html.slim

= form_with model:  micropost, local: true do |f|
  = render 'shared/error_messages', object: f.object
 
  .form-group id="micropost-tags"
    = f.label :tag
    //Affichage des balises / enregistrement
    //= f.text_field :tag_list, value: @micropost.tag_list.join(","), class: "form-control"

Appeler tagit

assets/javascripts/microposts.js

$(document).on('turbolinks:load', function () {
  return $('#micropost-tags').tagit({
  });

Enregistrer la balise

Actuellement, l'attribut name est le même, alors activez singleField et modifiez l'attribut name. Ajoutez-le au microposts.js que j'ai écrit plus tôt.

assets/javascripts/microposts.js

$(document).on('turbolinks:load', function () {
  $('#micropost-tags').tagit({
    fieldName: 'micropost[tag_list]',
    singleField: true,
  });

Le champ de saisie est <input type =" hidden "style =" display: none; "value =" Ruby, Python "name =" micropost [tag_list] "> Ajoutez : tag_list aux paramètres du contrôleur.

app/controllers/microposts_controller.rb

 def micropost_params
      params.require(:micropost).permit(:title, :content, { images: [] }, :tag_list)
 end

Afficher les balises sur l'écran d'édition

Passer des rails au javascript en utilisant gon. Ajoutez ce qui suit au Gemfile

Gemfile.

gem 'gon'

Ajoutez ce qui suit à la vue.

views/layouts/application.html.slim

    //= include_gon(:init => true) #Parfois ça marche ici
    = Gon::Base.render_data
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

Obtient les balises contenues dans la publication.

app/controllers/microposts_controller.rb

before_action :set_micropost_tags_to_gon, only: [:edit]

def set_micropost_tags_to_gon
     gon.micropost_tags = @micropost.tag_list
end

Ajouté avec createTag de Tag-it. Ajoutez-le au microposts.js que j'ai écrit plus tôt.

assets/javascripts/microposts.js

$(document).on('turbolinks:load', function() {
  var i, len, ref, results, tag;
  $('#micropost-tags').tagit({
    fieldName: 'micropost[tag_list]',
    singleField: true
  });
  if (gon.micropost_tags != null) {
    ref = gon.micropost_tags;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
      tag = ref[i];
      results.push($('#micropost-tags').tagit('createTag', tag));
    }
    return results;
  }
});

Vous devriez maintenant voir les balises existantes sur l'écran d'édition.

Saisie automatique

Récupérez toutes les balises de la liste des balises.

app/controllers/microposts_controller.rb

 before_action :set_available_tags_to_gon, only: [:edit]

 def set_available_tags_to_gon
      gon.available_tags = Micropost.tags_on(:tags).pluck(:name)
 end

Passez gon à ʻavailableTags`. La partie omise est la même que précédemment.

assets/javascripts/microposts.js

$(document).on('turbolinks:load', function () {
  var i, len, ref, results, tag;
  $('#micropost-tags').tagit({
    fieldName: 'micropost[tag_list]',
    singleField: true,
    availableTags: gon.available_tags,
  });
réduction

Je pense que vous pouvez le faire.

en conclusion

Si vous faites une erreur, veuillez faire une demande de modification ou un commentaire.

Les références

• Créer une fonction de balisage avec actes-comme-taggable-on et jQUery Tag-it