Suchvorschläge mit Vue.js implementieren

Einführung

In diesem Projekt lernst du, wie du eine Eingabe-Suchvorschläge-Funktion mit Vue.js 2.x implementierst. Diese Funktion wird in Webanwendungen häufig verwendet, um Benutzern eine Liste von passenden Daten anzuzeigen, wenn sie in das Suchfeld eingeben.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du den Anfangsbuchstaben der Tabellenüberschriften in der Datenbanktabelle groß schreibst
• Wie du die Suchvorschläge-Funktionalität basierend auf der Benutzereingabe implementierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Das DOM mit Vue.js-Direktiven wie v-for und v-model zu manipulieren
• Computierte Eigenschaften in Vue.js zu erstellen, um die Suchergebnisse zu filtern und anzuzeigen
• Grundlegende Styling auf die Tabelle und das Suchfeld anzuwenden

Projektstruktur einrichten

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:

├── index.html
└── js
    └── vue.js

Darin:

• js/vue.js ist die Vue 2.x-Datei.
• index.html enthält den Seitenlayout- und die Funktionsimplementierungslogik-Code.

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

Öffne anschließend "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Die Suchvorschläge-Funktion ist noch nicht implementiert.

Tabellenüberschriften groß schreiben

In diesem Schritt wirst du lernen, wie du den Anfangsbuchstaben der Tabellenüberschriften in der Datenbanktabelle groß schreibst.

1. Öffne die Datei index.html in deinem Code-Editor.
2. Locate the table header section in the HTML code:

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. Die v-for-Direktive wird verwendet, um durch das Array columns zu iterieren und die entsprechenden Tabellenüberschriften anzuzeigen. Der Code {{col.slice(0,1).toUpperCase() + col.slice(1)}} wird verwendet, um den Anfangsbuchstaben jedes Spaltennamens groß zu schreiben.

   • col.slice(0,1) extrahiert das erste Zeichen des Spaltennamens.
   • .toUpperCase() konvertiert das erste Zeichen in einen Großbuchstaben.
   • + col.slice(1) verknüpft das in Großbuchstaben konvertierte erste Zeichen mit dem Rest des Spaltennamens.

4. Speichere die Datei index.html und aktualisiere die Seite. Du solltest jetzt die Tabellenüberschriften mit dem Anfangsbuchstaben in Großbuchstaben sehen.

Suchvorschläge implementieren

In diesem Schritt wirst du lernen, wie du die Suchvorschläge-Funktionalität implementierst.

1. In der Datei index.html finde das Suchfeld und den zugehörigen Vue.js-Code und füge folgenden Code hinzu:

<span>Search for names: </span>
<!-- Add v-model code -->
<input placeholder="Enter the name to search" v-model="searchQuery" />

data: {
  searchQuery: "",
  //... andere Dateneigenschaften
},

// Der folgende Code ist der Code, der hinzugefügt werden muss
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
     .toLowerCase()
     .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. Die searchQuery-Dateneigenschaft wird mithilfe der v-model-Direktive an das Suchfeld gebunden. Dadurch kann die Vue.js-Instanz die Benutzereingabe verfolgen.
3. Die berechnete Eigenschaft newData filtert das data-Array basierend auf dem Wert von searchQuery. Es wird überprüft, ob die name-Eigenschaft jedes Datenelements den Suchbegriff enthält (groß- und kleingeschreibungslos).
4. Die gefilterten Daten werden dann im Tabellenkörper angezeigt:

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. Die v-for-Direktive wird verwendet, um durch das newData-Array zu iterieren und jedes Datenelement in einer Tabellenzeile anzuzeigen.
6. Speichere die Datei index.html und aktualisiere die Seite. Du solltest jetzt die Suchvorschläge-Funktionalität wie erwartet funktionieren sehen.

Jetzt hast du die Implementierung der Eingabe-Suchvorschläge-Funktion im bereitgestellten Vue.js-Projekt abgeschlossen. Das fertige Ergebnis ist wie folgt:

Zusammenfassung

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