Das Erstellen einer einfachen Suchfunktionalität

Einführung

In diesem Projekt lernst du, wie du JavaScript verwendest, um eine einfache Suchfunktionalität zu implementieren. Du wirst lernen, wie du das Eingabeereignis an ein Eingabefeld bindest, die Suchdaten verarbeitest und die Suchergebnisse anzeigt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das input-Ereignis an ein Eingabefeld bindest
• Wie du die handleInput-Methode implementierst, um die Suchdaten zu filtern
• Wie du die Suchergebnisse in einer Liste darstellst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Die addEventListener-Methode zum Binden von Ereignissen zu verwenden
• Die filter-Methode zum Filtern eines Arrays basierend auf einer Bedingung
• Die DOM zu manipulieren, um die Suchergebnisse zu aktualisieren

Das Projektstruktur aufsetzen

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur sieht wie folgt aus:

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

Dabei gilt:

• index.html ist die Hauptseite.
• css ist der Ordner zum Speichern der Projektstile.
• js/index.js ist die JavaScript-Datei, in der du den Code hinzufügen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Die Suchergebnisse anzeigen

In diesem Schritt wirst du die render-Methode implementieren, um die Suchergebnisse anzuzeigen.

1. Öffne die Datei js/index.js und finde die render-Methode im search-Objekt.
2. Füge innerhalb der render-Methode folgenden Code hinzu, um das HTML-Template für die Suchergebnisse zu generieren und das listEl-Element zu aktualisieren:

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

Die reduce-Methode wird verwendet, um einen HTML-Templat 字符串 zu erstellen, der die content-Eigenschaft jedes Elements im data-Array anzeigt.

Die handleInput-Methode implementieren

In diesem Schritt wirst du die handleInput-Methode implementieren, um die Suchfunktionalität zu verarbeiten.

1. Öffne die Datei js/index.js und finde die handleInput-Methode im search-Objekt.
2. Füge innerhalb der handleInput-Methode folgenden Code hinzu, um das data-Array basierend auf dem Eingabewert zu filtern und dann die Suchergebnisse anzuzeigen:

const value = e.target.value;
// Verwende einen Timer, um eine Ajax-Anfrage zu simulieren und Daten zu empfangen
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

Die setTimeout-Funktion wird verwendet, um eine asynchrone Operation, wie z. B. eine Ajax-Anfrage, zu simulieren, um die Suchdaten zu empfangen.

Das Eingabeereignis binden

In diesem Schritt wirst du lernen, wie du das input-Ereignis an das Eingabefeld bindest und die handleInput-Methode aufrufen, wenn sich der Wert des Eingabefelds ändert.

1. Öffne die Datei js/index.js.
2. Locate the handle function in the search object.
3. Füge innerhalb der handle-Funktion folgenden Code hinzu, um das input-Ereignis an das inputEl-Element zu binden und die handleInput-Methode aufzurufen:

this.inputEl.addEventListener("input", this.handleInput.bind(this));

Der Teil bind(this) ist wichtig, um sicherzustellen, dass this innerhalb der handleInput-Methode sich auf das search-Objekt selbst bezieht.

Nach Abschluss dieser vier Schritte sollte die Datei js/index.js nun die vollständige Implementierung der Suchfunktionalität enthalten, und das Projekt sollte wie erwartet funktionieren. Die endgültige Wirkung sollte wie folgt aussehen:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.