[JAVA] Implementierung der sequentiellen Suchfunktion

Überblick

Diesmal über die Implementierung der sequentiellen Suchfunktion Ich habe nicht viel verstanden, als ich es selbst implementiert habe, während ich mir den Lehrplan angesehen habe, also werde ich es mit der Bedeutung der Ausgabe veröffentlichen.

Die sequentielle Suchfunktion ist beispielsweise, wenn die Tags "Ruby", "Python" und "Ruby on Rails" bereits in der Datenbank vorhanden sind und wenn der Buchstabe r eingegeben wird, "Ruby" und "Ruby on Rails", die mit dem Buchstaben r übereinstimmen Ist eine Funktion, die als Kandidat sofort auf dem Bildschirm angezeigt wird.

Wird allgemein als ** Inkrementelle Suche ** bezeichnet.

Was ist inkrementelle Suche? Dies ist eine Suchfunktion, die bei jeder Eingabe eines Zeichens automatisch sucht. Es wird mit Ajax von JS implementiert.

Implementierung

Beschreibung der js-Datei

Kommentieren Sie Turbolinks aus, damit tag.js geladen werden kann.

javascript/packs/application.js

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../tag")

Erstellen und bearbeiten Sie tag.js.

javascript/tag.js

if (location.pathname.match("posts/new")){
  window.addEventListener("load", (e) => {
  const inputElement = document.getElementById("post_tag_name");
    inputElement.addEventListener("keyup", (e) => {
      const input = document.getElementById("post_tag_name").value;
      const xhr = new XMLHttpRequest();
      xhr.open("GET", `search/?input=${input}`, true);
      xhr.responseType = "json";
      xhr.send();
      xhr.onload = () => {
        const tagName = xhr.response.keyword;
        const searchResult = document.getElementById('search-result')
        searchResult.innerHTML = ''
        tagName.forEach(function(tag){

          const parentsElement = document.createElement('div')
          const childElement = document.createElement('div')

          parentsElement.setAttribute('id', 'parents')
          childElement.setAttribute('id', tag.id )
          childElement.setAttribute('class', 'child' )

          parentsElement.appendChild(childElement)
          childElement.innerHTML = tag.name
          searchResult.appendChild(parentsElement)

          const clickElement = document.getElementById(tag.id)
          clickElement.addEventListener("click", () => {
            document.getElementById("post_tag_name").value = clickElement.textContent;
            clickElement.remove();
          })
        })
      }
    });
  })
};

Schauen wir uns von hier aus den Code genauer an.

javascript/tag.js

const input = document.getElementById("post_tag_name").value;
      const xhr = new XMLHttpRequest();
      xhr.open("GET", `search/?input=${input}`, true);
      xhr.responseType = "json";
      xhr.send();

Hier wird Ajax beschrieben, nachdem der im Element eingegebene Wert mit dem ID-Namen post_tag_name "input" zugewiesen wurde.

In der späteren Bearbeitung legen wir das mit der Suchaktion verknüpfte Routing fest. Legen Sie daher den Pfad zur Suchaktion mit der "offenen Methode" fest. Zu diesem Zeitpunkt wird der Wert, der "Eingabe" zugewiesen ist, als Abfrageparameter festgelegt. Außerdem wird der Datentyp der Antwort als "json" angegeben und gesendet.

Darüber hinaus werden wir später beschreiben, wie die Suchaktion (Suche nach Tags) auf dem Controller ausgeführt wird.

Legen Sie ihn als Wert für den Schlüssel fest, der als Schlüsselwort bezeichnet wird, und verwenden Sie später die als json-Daten zurückgegebene Beschreibung als Controller.

javascript/tag.js

const parentsElement = document.createElement('div')
const childElement = document.createElement('div')

Hier wird ein div-Element erstellt, um die Ergebnisse der inkrementellen Suche auf dem Bildschirm anzuzeigen. Fügen Sie das Ergebnis der inkrementellen Suche zum erstellten div-Element hinzu.

javascript/tag.js

parentsElement.setAttribute('id', 'parents')
childElement.setAttribute('id', tag.id )
childElement.setAttribute('class', 'child' )

Die ID und der Klassenname werden dem zuvor erstellten div-Element zugewiesen. Weisen Sie childElement die ID des anzuzeigenden Tags zu. Es gibt auch den Klassennamen für die Zuweisung von CSS an.

javascript/tag.js

parentsElement.appendChild(childElement)
childElement.innerHTML = tag.name
searchResult.appendChild(parentsElement)

In diesem Teil werden wir childElement als untergeordnetes Element von parentElement hinzufügen. Generieren Sie als Nächstes das Tag-HTML, das in childElement angezeigt werden soll. Schließlich haben wir parentElement zu den untergeordneten Elementen von searchResult hinzugefügt.

javascript/tag.js

const searchResult = document.getElementById('search-result')
searchResult.innerHTML = ''

Dem searchResult werden leere Zeichen zugewiesen, sodass das zweite und die nachfolgenden Zeichen nicht doppelt angezeigt werden.

javascript/tag.js

const clickElement = document.getElementById(tag.id)
          clickElement.addEventListener("click", () => {
            document.getElementById("post_tag_name").value = clickElement.textContent;
            clickElement.remove();

Wenn Sie auf das als Kandidat angezeigte Tag klicken, wird das Textelement des ausgewählten Tags als Wert des Eingabeformulars festgelegt. Schließlich wird das ausgewählte Tag aus der Liste der Ansichten entfernt.

Das Obige ist eine Reihe von Bewegungen der inkrementellen Suche.

Routing einrichten

config/routes.rb

resources :posts, only: [:index, :new, :create] do
    collection do
      get 'search'
    end
  end

Controller bearbeiten

controller/posts_controller.rb

class PostsController < ApplicationController

  def index
    @posts = Post.all.order(created_at: :desc)
  end

  ---Kürzung---

  def search
    return nil if params[:input] == ""
    tag = Tag.where(['name LIKE ?', "%#{params[:input]}%"])
    render json:{ keyword: tag }
  end
  

  ---Kürzung---
end

Damit ist die Implementierung abgeschlossen. Lassen Sie uns die Operation überprüfen.

Wenn ein Fehler auftritt

Eine mögliche Lösung für den Fehler in dieser Implementierung besteht darin, beim Ausführen von getElementById auf den ID-Namen zu achten.

In dieser Implementierung haben wir eine inkrementelle Suche nach dem post_tag-Modell des Formularobjekts implementiert.

Wenn Sie sich den vollständigen Text von js ansehen, finden Sie in der ersten Zeile eine Beschreibung des Pfads. Dieses Mal wollte ich eine Funktion implementieren, um nacheinander zu suchen, indem Tags eingegeben werden, wenn neue Beiträge erstellt werden. Es handelt sich also um Beiträge / Neu.

Abgesehen von diesen beiden Punkten können Sie sie kopieren und einfügen.

Vergessen Sie nicht, Turbo Links auszuschalten oder tag.js zu laden.

Impressionen

Es gibt nur wenige Möglichkeiten, Javascript im Lehrplan zu berühren, und ich bin nicht gut darin, also werde ich mein Bestes geben.