[RUBY] Erstellen einer Funktion zur automatischen Vervollständigung mit Acts-as-Taggable-On und Tagit.js

Vollständiges System

Entwicklungsumgebung

ubuntu(WSL)
Rails 6.0.2
Ruby 2.5.1

Vorbereitungen

--Erstellen einer Tag-Funktion --Erstellen einer Buchungsfunktion (CRUD) Informationen zum Erstellen der Tag-Funktion finden Sie unter hier.

Einführung von Tagit

Führen Sie den folgenden Befehl aus und platzieren Sie ihn unter "Anbieter / Assets". Wenn Sie keinen "Anbieter / Vermögenswert" haben, erstellen Sie selbst einen.

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

Da Jqury verwendet wird, fügen Sie bitte "jqury-ui-Rails" zur Gemfile hinzu.

Gemfile.

gem 'ransack'
gem 'acts-as-taggable-on', '~> 6.0'
gem 'jquery-ui-rails' #hinzufügen

Fügen Sie Folgendes zu application.js und application.scss hinzu, um Tagit und JquryUi zu laden. Ich werde sie vorerst alle setzen.

application.js

//= require jquery #hinzufügen
//= require rails-ujs　#hinzufügen
//= require popper
//= require turbolinks　#hinzufügen
//= require_tree .　#hinzufügen
//= require bootstrap
//= require activestorage
//= require jquery-ui/widgets/autocomplete　#hinzufügen
//= require tag-it　#hinzufügen

application.scss

/*
 *= require_tree . #hinzufügen
 *= require jquery.tagit #hinzufügen
 *= require tagit.ui-zendesk #hinzufügen
 *= require_self #hinzufügen
*/

Erstellen Sie ein Textfeld. Fügen Sie dem Block form_for eine beliebige ID hinzu. Wenn Sie eine ID zu "f.text_field" hinzufügen, werden zwei Textfelder erstellt. Fügen Sie also eine ID zu ".form-group" hinzu.

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
    //Tag-Eingabe / Speicheranzeige
    //= f.text_field :tag_list, value: @micropost.tag_list.join(","), class: "form-control"

Tagit anrufen

assets/javascripts/microposts.js

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

Tag speichern

Derzeit ist das Namensattribut dasselbe. Aktivieren Sie daher "singleField" und ändern Sie das Namensattribut. Fügen Sie es zu den microposts.js hinzu, die ich zuvor geschrieben habe.

assets/javascripts/microposts.js

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

Das Eingabefeld lautet "<input type =" hidden "style =" display: none; "value =" Ruby, Python "name =" micropost [tag_list] ">" Fügen Sie den Controller-Parametern : tag_list hinzu.

app/controllers/microposts_controller.rb

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

Tags auf dem Bearbeitungsbildschirm anzeigen

Mit gon von Schienen auf Javascript übergehen. Fügen Sie dem Gemfile Folgendes hinzu

Gemfile.

gem 'gon'

Fügen Sie der Ansicht Folgendes hinzu.

views/layouts/application.html.slim

    //= include_gon(:init => true) #Manchmal funktioniert es hier
    = Gon::Base.render_data
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

Ruft die im Beitrag enthaltenen Tags ab.

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

Hinzugefügt mit createTag von Tag-it. Fügen Sie es zu den microposts.js hinzu, die ich zuvor geschrieben habe.

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;
  }
});

Sie sollten jetzt die vorhandenen Tags auf dem Bearbeitungsbildschirm sehen.

Automatische Vervollständigung

Holen Sie sich alle Tags in der Tag-Liste.

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

Übergeben Sie gon an "availableTags". Der ausgelassene Teil ist der gleiche wie zuvor.

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,
  });
Kürzung

Ich denke du kannst das machen.

abschließend

Wenn Sie einen Fehler machen, stellen Sie bitte eine Bearbeitungsanfrage oder einen Kommentar.

Verweise

• Tagging-Funktion mit Acts-as-Taggable-On und jQUery Tag-It erstellen