AngularJS - Suchleiste

Hallo, angehende Programmierer! Heute tauchen wir in die aufregende Welt von AngularJS ein und lernen, wie man eine Suchleiste erstellt. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf diesem Weg Schritt für Schritt zu führen. Also, hol dir eine Tasse Kaffee (oder dein Lieblingsgetränk) und los geht's!

AngularJS - Search Tab

Einführung in die AngularJS-Suchleiste

Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was eine Suchleiste ist und warum sie nützlich ist. Stell dir vor, du baust eine Webseite mit einer großen Menge an Daten, wie ein Bibliotheksverzeichnis oder ein Onlineshop. Eine Suchleiste ermöglicht es den Benutzern, schnell das zu finden, wonach sie suchen, ohne endlose Seiten durchzublättern. Es ist wie ein superkluger Assistent, der sofort die Informationen holen kann, die du benötigst!

Einrichtung unseres Projekts

Zuerst einmal müssen wir unser Projekt einrichten. Keine Sorge, wenn du das noch nie gemacht hast – ich werde dich durch den Prozess führen!

Schritt 1: Einbinden der AngularJS-Bibliothek

Um AngularJS zu verwenden, müssen wir seine Bibliothek in unsere HTML-Datei einbinden. Füge die folgende Zeile in den <head>-Bereich deiner HTML-Datei ein:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Diese Zeile ist so, als lädtst du AngularJS zu unserer Codierungsfeier ein. Sie gibt uns Zugang zu all den coolen Funktionen, die wir verwenden werden.

Schritt 2: Erstellen der HTML-Struktur

Nun erstellen wir die grundlegende Struktur unserer Suchleiste. Sie sieht so aus:

<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchText" placeholder="Suchen...">
<ul>
<li ng-repeat="item in items | filter:searchText">{{item}}</li>
</ul>
</div>

Lassen Sie uns das auseinandernehmen:

ng-app="searchApp": Das tells AngularJS, dass dieses div unsere Anwendung ist.
ng-controller="searchCtrl": Das verbindet unser HTML mit einem Controller, den wir gleich erstellen werden.
ng-model="searchText": Das bindet das Eingabefeld an eine Variable namens searchText.
ng-repeat="item in items | filter:searchText": Das erstellt ein Listenelement für jedes Element in unserem items-Array, gefiltert nach searchText.

Erstellen des AngularJS-Controllers

Nun, da wir unsere HTML-Struktur haben, erstellen wir das Gehirn unserer Anwendung – den Controller!

var app = angular.module('searchApp', []);

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
});

Hier ist, was passiert:

Wir erstellen ein AngularJS-Modul namens searchApp.
Wir definieren einen Controller namens searchCtrl.
Innerhalb des Controllers erstellen wir ein Array von Elementen, durch die wir suchen möchten.

Wie alles zusammenarbeitet

Wenn du in das Suchfeld tippst, aktualisiert AngularJS automatisch die searchText-Variable. Die ng-repeat-Direktive verwendet dann diesen searchText, um das items-Array zu filtern. Es ist wie Magie, aber es ist eigentlich nur AngularJS, das im Hintergrund seine Arbeit macht!

Verbessern unserer Suchleiste

Nun, da wir eine grundlegende Suche haben, die funktioniert, lassen wir uns einige Features hinzufügen!

Großbuchstabenunabhängige Suche

Um unsere Suche großbuchstabenunabhängig zu machen (damit "apple" "Apple" matches), können wir unseren Filter anpassen:

<li ng-repeat="item in items | filter:searchText:ignoreCase">{{item}}</li>

benutzerdefinierte Filterfunktion

Für komplexere Filterungen können wir eine benutzerdefinierte Filterfunktion erstellen:

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});

Dann in unserem HTML:

<li ng-repeat="item in items | filter:customFilter">{{item}}</li>

Diese benutzerdefinierte Filterfunktion ermöglicht es uns, komplexere Suchlogik zu implementieren, falls nötig.

Styling unserer Suchleiste

Lassen wir nicht das Styling unserer Suchleiste vergessen! Hier ist etwas CSS, um sie aufzupeppen:

<style>
.search-container {
max-width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}
</style>

Vergiss nicht, der Hauptdiv die Klasse search-container hinzuzufügen!

Alles zusammenfügen

Hier ist unsere komplette HTML-Datei mit allen Teilen an Ort und Stelle:

<!DOCTYPE html>
<html ng-app="searchApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS-Stile hier */
</style>
</head>
<body ng-controller="searchCtrl">
<div class="search-container">
<input type="text" ng-model="searchText" placeholder="Suchen...">
<ul>
<li ng-repeat="item in items | filter:customFilter">{{item}}</li>
</ul>
</div>
<script>
var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

Fazit

Glückwunsch! Du hast gerade eine funktionierende Suchleiste mit AngularJS erstellt. Von der Einrichtung des Projekts bis hin zur Implementierung benutzerdefinierter Filter und dem Hinzufügen von Stil, hast du eine Menge gelernt. Denke daran, Übung macht den Meister, also habe keine Angst, verschiedene Datensätze auszuprobieren oder mehr Funktionen zu deinem Suchtab hinzuzufügen.

Hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven und Konzepte zusammenfasst, die wir verwendet haben:

Direktive/Konzept	Zweck
ng-app	Definiert die AngularJS-Anwendung
ng-controller	Spezifiziert den Controller für die Anwendung
ng-model	Bindet ein Eingabefeld an eine Variable
ng-repeat	Iteriert über eine Sammlung
filter	Filtert ein Array basierend auf Kriterien
benutzerdefinierte Filterfunktion	Ermöglicht komplexere Filterlogik

Weiter codieren, bleib neugierig und viel Spaß beim Suchen!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Bestellformular

Nächstes Tutorial:

AngularJS - Drag-Anwendung