[RUBY] Zeitlose Suche mit Rails + JavaScript (jQuery)
Suchfunktion in Artikeln behandelt
Es ist eine Suchfunktion wie diese. Dieses Mal extrahieren wir die Spalte mit dem Namen name aus der Tabelle mit dem Namen shop und zeigen sie in der Ansicht an.
- Es wurden mehrere Geschäftsinformationen registriert. Suchen Sie von dort aus in einer beliebigen Spalte nach einem Geschäft.
- Tun Sie es asynchron --Suchen und zeichnen Sie jedes Mal, wenn Sie ein Zeichen eingeben --Klicken Sie auf das Suchergebnis, um auf die entsprechende Seite zu verlinken
Wahrscheinlich denke ich, dass der Wissensstand und der gesunde Menschenverstand beim Programmieren für Anfänger viel niedriger sind als die von erfahrenen Leuten. Also werde ich, soweit ich kann, schreiben: "Ist es notwendig, so etwas zu erklären?"
Entwicklungsumgebung
mac Ruby 2.5.1 Rails 5.2.3 jQuery
Erforderliche Dateien
Zunächst werden die für die Implementierung erforderlichen Dateien unten zusammengefasst.
- Vorbereitung des ** Controllers **, der die zu suchenden Aktionen definiert
app/controllers/shops_controller.rb
def search
end
- Vorbereitung von ** json.jbuilder ** entsprechend der obigen Aktion
ruby:views/shops/search.json.jbuilder
#Achten Sie auf Verzeichnisbeziehungen und Dateinamen, die dem oben erstellten Controller und der oben erstellten Aktion entsprechen
#In diesem Fall Ansichten/shops(Entspricht dem Controller-Namen)/search(Entspricht dem Aktionsnamen).json.jbuilder
- Vorbereitung des ** Routings ** für die oben genannten Aktionen
config/route.rb
resources :shops do #in der Werkstatt Controller
collection do
get 'search' #Suchaktion
end
end
--Erstellen einer ** Ansicht ** -Datei zur Anzeige des Suchformulars und der Ergebnisse
ruby:app/views/shops/index.html.haml
#Dieses Mal wird die Suche auf dem Bildschirm mit der Shopliste angezeigt.
#Ich werde mit haml schreiben, aber es kann normales HTML oder schlank sein.
- ** js ** Dateivorbereitung
app/assets/javascripts/search.js
#.Jeder Name kann verwendet werden, solange er mit js endet
Wie oben erwähnt, werden wir die Suchfunktion mit fünf Dateien implementieren.
Wie funktioniert es?
Der Ablauf des Suchvorgangs ist wie folgt.
Empfangen Sie das im Suchformular aufgetretene Ereignis als .js-Datei.
○○.html.haml(○○.html.erb) → ○○.js
Senden Sie die empfangenen Informationen im JSON-Format an den Controller.
○○.js → ○○_controller
Der Controller extrahiert die erforderlichen Informationen aus der Datenbank und konvertiert sie mit jbuilder, damit sie in .js verwendet werden können.
○○_controller → ○○.json.jbuilder
Senden Sie es erneut an die js-Seite und zeichnen Sie es in HTML.
○○.json.jbuilder → ○○.js → ○○.html.haml
Wenn Sie den Prozessablauf nicht kennen, können Sie einen Fehler nicht beheben und verschwenden ein oder zwei Stunden. Ich werde so viel wie möglich in dem eigentlichen Code erklären, den ich schreiben werde. Bitte lesen Sie ihn unter Berücksichtigung des obigen Verarbeitungsablaufs.
Lass uns anfangen.
Routing machen
Setzen Sie diesmal als Beispiel die Aktion ** search ** in ** shop_controller **.
app/controllers/shops_controller.rb
def search
end
config/route.rb
resources :shops do #in der Werkstatt Controller
collection do
get 'search' #Suchaktion
end
end
Vorbereitung des Suchformulars und des Ergebnisanzeigefeldes
ruby:app/views/shops/index.html.haml
.search-field
.fas.fa-search #Ich benutze eine Lupe.
.shop_search
= f.text_field :text, placeholder: "Suche nach Geschäft / Adresse", id: "shop_search" #Ein Texteingabefeld wird eingerichtet.
#shop_search--Ergebnis ← einkaufen statt auskommentieren_search--Der ID-Name ist Ergebnis. Suchergebnisse anzeigen.
.shop-search-list
Empfangen Sie die im Suchformular eingegebenen Informationen und senden Sie die empfangenen Informationen an die Steuerung
app/assets/javascripts/search.js
$("#shop_search").on("keyup", function(){
let input = $("#shop_search").val();
$.ajax({
type: 'GET',
url: '/shops/search',
data: {keyword: input},
dataType: 'json'
})
Zunächst erhalten Sie die im Suchformular (f.text_field in der haml-Datei) eingegebenen Informationen als js-Datei. ┗ Geben Sie den ID-Namen an, der dem Suchformular zugewiesen wurde, und rufen Sie die Informationen mit der Taste ab, sobald Sie bei der Eingabe von Zeichen Ihren Finger von der Tastatur sprechen.
Die Informationen unter Ajax ·Wie ·wo ·Was ・ In welchem Zustand Geben Sie an, ob gesendet werden soll.
In diesem Fall denke ich, dass die GET-Methode die Eingabe an die Suchaktion im Shops-Controller in der JSON-Methode sendet.
Beschreiben der Aktionseinstellungen und Interaktionen mit DB auf dem Controller
app/controllers/shops_controller.rb
def search
return nil if params[:keyword] == ""
@shops = Shop.where('name LIKE ? OR location LIKE ?', "%#{params[:keyword]}%", "%#{params[:keyword]}%").limit(10)
respond_to do |format|
format.html
format.json
end
end
Dieses Mal habe ich beim Erstellen der Shop-Tabelle die Spalte Name (Geschäftsname) und Standort (Standort) festgelegt, damit ich mit diesen beiden Informationen suchen kann. Zum Beispiel, wenn Sie nur nach Geschäftsnamen suchen möchten
app/controllers/shops_controller.rb
def search
return nil if params[:keyword] == ""
@shops = Shop.where('name LIKE ?, "%#{params[:keyword]}%").limit(10)
respond_to do |format|
format.html
format.json
end
end
Ist in Ordnung.
** params [: keyword] ** in der Aktion stammt aus data: {keyword: input} unter ajax in der vorherigen js-Datei. Es mag schwer zu verstehen sein, aber es bedeutet, dass die in das Suchfeld eingegebenen Zeichen als Eingaben in die js-Datei und als Schlüsselwörter in die Controller-Datei behandelt werden. Wenn im Suchfeld (zweite Zeile "") nichts eingegeben wird, wird nil zurückgegeben.
In der dritten Zeile ruft die Shops-Tabelle basierend auf diesem Schlüsselwort (im Suchfeld eingegebenes Zeichen) Informationen aus der Datenbank ab. Dieses Mal ist es eine Spezifikation, eine teilweise Übereinstimmungssuche durchzuführen, indem das Mengenende der Parameter [: Schlüsselwort] in **% ** eingeschlossen wird. Weitere Suchmethoden finden Sie in diesem Artikel.
- Rails - Fuzzy-Suche nach Zeichen mithilfe der LIKE-Klausel (wenn Sie nach Wörtern suchen möchten, die bestimmte Zeichen enthalten) Ich habe auch auf diesen Artikel verwiesen. Vielen Dank.
Und da die diesmal eingegebenen Zeichendaten im json-Format im Controller vorliegen, werden sie in jbuilder verschoben.
Informationskonvertierung mit json.jbuilder
ruby:search.json.jbuilder
json.array! @shops do |shop|
json.name shop.name
json.location shop.location
end
Ich habe die Informationen aus der Datenbank im Controller extrahiert, muss diese Daten jedoch in das JSON-Format konvertieren. Mach das mit jbuilder.
Zeichnen von Suchergebnissen in HTML-Dateien
Fügen Sie zunächst die Verarbeitung hinzu, wenn die Verarbeitung durch den Controller abgeschlossen und unter der js-Datei ajax zurückgegeben wurde.
app/assets/javascripts/search.js
$("#shop_search").on("keyup", function(){
let input = $("#shop_search").val();
$.ajax({
type: 'GET',
url: '/shops/search',
data: {keyword: input},
dataType: 'json'
})
.done(function(shops){
$("#shop_search--result").empty();
if (shops.length !== 0) {
shops.forEach(function(shop){
addShop(shop);
});
}
else if (input.length == 0){
return false;
} else {
addNoShop();
}
});
});
Unter .done ist der Prozess.
Dann werden addShop und addNoShop in HTML gezeichnet.
Unten ist die vollständige js-Datei.
app/assets/javascripts/search.js
$(function(){
function addShop(shop) {
let html = `
<a href="/shops/${shop.id} class="shop_search-list">
<div>${shop.name} - ${shop.location}</div>
</a>
`;
$("#shop_search--result").append(html);
};
function addNoShop(){
let html =`Es gibt keinen Laden`
$("#shop_search--result").append(html);
};
$("#shop_search").on("keyup", function(){
let input = $("#shop_search").val();
$.ajax({
type: 'GET',
url: '/shops/search',
data: {keyword: input},
dataType: 'json'
})
.done(function(shops){
$("#shop_search--result").empty();
if (shops.length !== 0) {
shops.forEach(function(shop){
addShop(shop);
});
}
else if (input.length == 0){
return false;
} else {
addNoShop();
}
})
});
});
Geben Sie den Standard beim Zeichnen als let html an. Dieses Mal habe ich versucht, einen Link zur Detailseite zu erstellen, als ich auf das Suchergebnis geklickt habe.
Fügen Sie die mit append erstellte feste Phrase (html) an der Stelle (# shop_search - result) ein, an der die Suchergebnisse in der haml-Datei angezeigt werden.
Damit ist die asynchrone Suchfunktion (inkrementelle Suche) abgeschlossen.
Versuch es
Dieser Inhalt wurde erstellt, während das Verständnis vertieft wurde, indem der von mir in der Schule erlernte Inhalt in Frage gestellt wurde. Zu Beginn des Studiums hatte ich gehofft, dass ich es mit halbherzigem Verständnis schaffen könnte, aber als ich alleine mit 1 anfing, hörte ich oft auf zu arbeiten. Es ist ein Spiegelbild.
Ich denke, es geht darum zu verstehen, wo und wie sich die Datei jedes Mal ändert. Wie bei jeder Funktion wird auch in diesem Fall dringend empfohlen, das Schreiben während des Debuggens fortzusetzen, z. B. console.log.
Recommended Posts