Erstellen eines Suchfelds in AngularJS

Oluwafisayo Oluwatayo 15 Februar 2024

Angular Angular Search Box

Erstellen eines Suchfelds mit Symbolen mit Angular Material in AngularJS
Erstellen Sie ein Suchfeld mit Symbol mit Font-Awesome in AngularJS
Abschluss

Der Hauptgrund für die Implementierung von Platzhaltern in Eingabeleisten ist, dass Benutzer wissen, was sie in das Eingabefeld eintragen sollen. Bei einem Suchfeld könnten wir statt eines Platzhalters stattdessen ein Such-Icon entwerfen.

Das Suchdesign sieht mit einer solchen Idee reifer aus und fühlt sich auch so an. Außerdem kann das Suchsymbol das übliche Suchsymbol ersetzen, indem das Suchsymbol anklickbar gemacht wird.

Sehen wir uns Methoden an, um das Suchfeld mit Symbolen innerhalb des Angular-Frameworks zu implementieren.

Erstellen eines Suchfelds mit Symbolen mit Angular Material in AngularJS

Das Angular Material stellt uns einfach zu verwendende Komponenten und Symbole für unsere Webseite zur Verfügung. Wir werden es in diesem Beispiel implementieren.

Mit dem Terminal in VS Code erstellen wir zunächst ein neues Angular-Projekt, navigieren zum Projektordner und installieren das Modul material mit ng add @angular/material.

Dann navigieren wir zur app.component.html, um diese Codes zu schreiben:

Code-Snippet – app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <span matPrefix> </span>
    <input type="tel" matInput placeholder="Search" name="search" [(ngModel)]="search">
    <button matSuffix mat-button>
      <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>
  <br />
  {{search}}
</form>

Das matSuffix platziert das Suchsymbol hinter dem Eingabefeld, und wir verwenden das mat-icon, um das Suchsymbol zu erstellen.

Dann importieren wir die Module, die das Suchsymbol funktionieren lassen. Die Datei app.module.ts sollte wie folgt aussehen:

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

Erstellen Sie ein Suchfeld mit Symbol mit Font-Awesome in AngularJS

Font-Awesome ist die erste Adresse, um alle Arten von Symbolen zu erhalten, daher müssen wir den Font-Awesome-CSS-Link für das Suchsymbol importieren.

Wir besuchen cdnjs.com/libraries/angular.js und kopieren die CSS-URL in den oberen Teil der Datei app.component.html der Projekt-App. Dann fügen wir die CSS-Klasse für die Suche von fontawesome.com hinzu.

Dann fügen wir den Rest der Codes wie folgt hinzu:

Code-Snippet – app.component.html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sample" >
  <div class="sample ten">
    <input type="text" name="search" ng-model="search.$" placeholder="search">
    <button type="submit" class="btn btn-search">
      <i class="fa fa-search"></i>
    </button>
    <button type="reset" class="btn btn-reset fa fa-times"></button>
  </div>
  <br>
</div>

Dann fügen wir das CSS-Styling wie folgt hinzu:

Codeschnipsel- css:

* {
  box-sizing: border-box;
}

html,
body {
  font-size: 12px;
}

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 50%;
}
input:focus {
  outline: none;
}

button {
  text-align: center;
}
button:focus {
  outline: none;
}
button.btn-search, button.btn-reset {
  background: #568683;
  border: none;
  height: 30px;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  width: 30px;
}

.sample {
  float: left;
  height: 50px;
  margin: 0 8%;
  position: relative;
  width: 34%;
}
.sample.ten input {
  border-radius: 15px;
  transition: all .6s ease-in-out .3s;
  width: 120px;
}
.sample.ten input:focus {
  transition-delay: 0;
  width: 200px;
}
.sample.ten input:focus ~ button {
  transform: rotateZ(360deg);
}
.sample.ten input:focus ~ button.btn-search {
  background: #568683;
  color: #fff;
  left: 172px;
  transition-delay: 0;
}
.sample.ten input:focus ~ button.btn-reset {
  left: 202px;
  transition-delay: .3s;
}
.sample.ten button {
  transition: all .6s ease-in-out;
}
.sample.ten button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  transition-delay: .3s;
  width: 26px;
}
.sample.ten button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}

Ausgang:

Abschluss

Das Erstellen eines Suchfelds mit einem Symbol ist eine sehr subtile Möglichkeit, Besucher wissen zu lassen, wofür dieses Eingabefeld dient, und es kann gleichermaßen als Senden-Schaltfläche dienen, die Ihrer Webseite Platz für andere Inhalte gibt.

Autor: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.