AngularJS Autovervollständigung

  2. How-To's
  3. Angular Howtos
  4. AngularJS Autovervollständigung
Oluwafisayo Oluwatayo 15 Februar 2024
Angular Angular Autocomplete Angular Bootstrap
  1. Implementieren Sie AngularJS Autocomplete mit REST API und Bootstrap
  2. Implementieren Sie AngularJS Autocomplete mit dem Modul ng-autocomplete
  3. Implementieren Sie AngularJS Autocomplete mit Angular-Material
  4. Abschluss
AngularJS Autovervollständigung

Die Autocomplete-Funktion ist eine Funktion, die das Leben aus mehreren Gründen erleichtert. Es macht es einfach und schneller, Texte zu schreiben, da während der Eingabe von Buchstaben in die Eingabeleiste Vorschläge und Vorhersagen von Wörtern angezeigt werden, die wir zu machen versuchen.

Wenn wir außerdem überprüfen möchten, ob ein bestimmter Name in einer Namensliste enthalten ist, schlägt die Autocomplete-Funktion die Namen während der Eingabe vor, wodurch das Durchsuchen der Liste beschleunigt wird, wie mit einem Pseudo-Strg+F.

Im Angular-Framework gibt es verschiedene Möglichkeiten, die Autocomplete-Funktion zum Einsatz zu bringen.

Implementieren Sie AngularJS Autocomplete mit REST API und Bootstrap

Um die Autocomplete-Funktion in dieser Methode zu erstellen, erhalten wir die Struktur und das Styling von Bootstrap. Dann erhalten wir die Daten, die wir mithilfe der REST-API durchsuchen werden.

Zunächst erstellen wir eine neue Datei mit ng new autocomplete, dann müssen wir eine Servicedatei erstellen. Dies ist die Datei, in die wir Codes einfügen, die Daten mithilfe der REST-API abrufen.

Als nächstes gehen wir zu getbootstrap.com, klicken auf Erste Schritte und kopieren dann unter der CSS-Überschrift den Link und fügen ihn in das head-Tag der index.html-Datei ein, wie unten zu sehen:

Code-Snippet – index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgAutoComplete</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>
  <app-root></app-root>
</body>

</html>

Dann navigieren wir zur Datei app.component.html, um die Seitenstruktur mit Bootstrap zu erstellen. Suchen Sie auf der Bootstrap-Seite nach autocomplete, kopieren Sie das Code-Snippet unter Datalists und fügen Sie es ein.

Dann passen wir das Code-Snippet an die Daten an, nach denen wir suchen, wie unten:

Code-Snippet – app.component.html:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form mt-5">
        <label for="exampleDataList" class="form-label">Datalist example</label>
        <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."
          (change)="nameValue($any($event.target).value)">
        <datalist id="datalistOptions">
          <option *ngFor="let post of posts" [value]="post.name">
        </datalist>
      </form>
    </div>
  </div>
  <div class="row mt-5" *ngIf="username">
    <div class="col-sm-4">
      <div class="card purple">
        <h3 class="title">{{username}}</h3>
      </div>
    </div>
  </div>
</div>

Wir werden die Funktion ngFor verwenden, um die Webseite mit den verschiedenen Namen zu rendern, die wir aus unserer Liste auswählen. Dann bauen wir den Code in die app.component.ts ein, um die Daten zu erhalten, die wir aus der auto.service.ts-Datei generieren; Am Ende sollte es so aussehen:

Code-Snippet – app.component.ts:

import { Component, OnInit } from '@angular/core';
import { AutoService } from './auto.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'autocomthree';
  posts!: any;
  username: any;
  constructor(private service: AutoService) { }
  ngOnInit() {
    this.getAllData();
  }
  getAllData() {
    this.service.getData().subscribe((res: any) => {
      this.posts = res;
      console.log(this.posts);
    });
  }
  nameValue(name: any) {
    this.username = name;
    console.log(this.username);
  }
}

In app.module.ts importieren wir die Abhängigkeiten/Module, die wir brauchen, damit unsere App funktioniert, also sollte unsere app.module.ts so aussehen:

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, ReactiveFormsModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Wir müssen jetzt die Daten generieren, die wir in der Autocomplete-App verwenden möchten. Vom Terminal aus installieren wir im Ordner project die Datei service mit ng g s auto.

Die Datei sollte sich unter den Komponentendateien im Ordner src » app befinden. Wir navigieren in die Datei und fügen diese Codes ein:

Code-Snippet- auto.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AutoService {
  private baseURL = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(this.baseURL);
  }
}

In der Datei service deklarieren wir die URL, von der die Daten abgerufen werden sollen, und verwenden die Funktion getData(), um die Daten abzurufen.

Um die Webseite schön zu gestalten, können wir das folgende Styling wie folgt zur Datei app.component.ts hinzufügen:

Code-Snippet – app.component.css:

.card {
    width: 100%;
    display: inline-block;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  }
  .title {
      margin-top: 0px;
  }
  .purple, .blue, .red, .orange, .green {
    color: #fff;
  }
  .purple {
    background: #5133AB;
  }

Ausgang:

AngularJS-Autovervollständigung mit REST-API und Bootstrap

Implementieren Sie AngularJS Autocomplete mit dem Modul ng-autocomplete

Mit dieser Methode installieren wir das Angular-Modul autocomplete. Nachdem wir einen neuen Projektordner erstellt haben, installieren wir mit npm install angular-ng-autocomplete ein neues Angular-Modul.

Dann gehen wir zu npmjs.com/package/angular-ng-autocomplete und kopieren das Verwendungsbeispiel in die Datei app.component.html, wie unten:

Code-Snippet – app.component.html:

<h1>{{title}}</h1>
<div class="ng-autocomplete">
  <ng-autocomplete
    [data]="data"
    [searchKeyword]="keyword"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    [itemTemplate]="itemTemplate"
    [notFoundTemplate]="notFoundTemplate">
  </ng-autocomplete>
  <ng-template #itemTemplate let-item>
  <a [innerHTML]="item.name"></a>
  </ng-template>
  <ng-template #notFoundTemplate let-notFound>
  <div [innerHTML]="notFound"></div>
  </ng-template>
  </div>

Dann erstellen wir in der Datei app.component.ts die Liste der Namen, die wir in der Autocomplete-Web-App verwenden möchten, in Form eines Arrays, wie unten gezeigt:

Code-Snippet – app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    '.ng-autocomplete {position: fixed; /* or absolute */ top: 50%; left: 20%;}'
  ]
})
export class AppComponent {
  title = 'Angular Autocomplete';
  keyword = 'name';
  data = [
     {
       id: 1,
       name: 'Usa'
     },
     {
       id: 2,
       name: 'England'
     },
     {
       id: 3,
       name: 'India'
     },
     {
       id: 4,
       name: 'africa'
     },
     {
       id: 5,
       name: 'nigeria'
     },
     {
       id: 6,
       name: 'albania'
     },
     {
       id: 7,
       name: 'madagascar'
     }
  ];
  selectEvent(item: any) {
    console.log('selected item '+item.name);
  }
  onChangeSearch(val: string) {
    console.log('selected val '+val);
  }
  onFocused(e: any){
  }
}

Der Event-Handler onFocused wird aktiv, sobald wir auf die Suchleiste klicken, dann zeigt die Funktion selectEvent das Element an, das wir aus der Liste ausgewählt haben.

Dann importieren wir in app.module.ts die Module, die wir zuvor installiert haben, wie unten zu sehen:

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {AutocompleteLibModule} from 'angular-ng-autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AutocompleteLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

AngularJS Autocomplete Using the ng-autocomplete Module

Implementieren Sie AngularJS Autocomplete mit Angular-Material

Das Angular-Material stellt uns fertige Angular-Komponenten für Webanwendungen zur Verfügung, und in diesem Beispiel verwenden wir das Modul autocomplete.

Nachdem wir einen neuen project-Ordner erstellt haben, navigieren wir zum project-Ordner und installieren das Angular-Material mit ng add @angular/material. Dann besuchen wir material.angular.io, klicken auf Get Started, Components und wählen Autocomplete.

In der Beispiel-Registerkarte verwenden wir die für States, also kopieren wir die HTML-Code-Snippets in unsere app.component.html, wie unten:

Code-Snippet – app.component.html:

<form [formGroup]="stateForm">
  <mat-form-field appearance="fill">
    <mat-label>States Group</mat-label>
    <input type="text"
           matInput
           formControlName="stateGroup"
           required
           [matAutocomplete]="autoGroup">
      <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
    </mat-autocomplete>
  </mat-form-field>
</form>

Das macht die Struktur unserer Seite, um genau zu sein, die Suchleiste States.

Dann importieren wir innerhalb der app.module.ts die Module für unsere autocomplete-Komponenten, das Formularfeld für die Liste der Staaten als Eingabemodul. Die Datei sieht wie folgt aus:

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';

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

Die Datei app.component.ts enthält den Hauptcode für unsere Anwendung. Dennoch kopieren wir auf der Angular-Website die TS-Code-Snippets des States-Beispiels und fügen sie in die export-Klasse der AppComponent ein.

Davor kopieren wir den ersten Teil des TS-Codeschnipsels, die Export Interface StateGroup, direkt nach den Importen. Die Datei app.component.ts sollte Codes haben, wie unten gezeigt:

Code-Snippet – app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import {FormBuilder} from '@angular/forms';

export interface StateGroup {
  letter: string;
  names: string[];
}
export const _filter = (opt: string[], value: string): string[] => {
  const filterValue = value.toLowerCase();

  return opt.filter(item => item.toLowerCase().includes(filterValue));
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'autocomnine';
  stateForm = this._formBuilder.group({
    stateGroup: '',
  });

  stateGroups: StateGroup[] = [
    {
      letter: 'A',
      names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas'],
    },
    {
      letter: 'C',
      names: ['California', 'Colorado', 'Connecticut'],
    },
    {
      letter: 'D',
      names: ['Delaware'],
    },
    {
      letter: 'F',
      names: ['Florida'],
    },
    {
      letter: 'G',
      names: ['Georgia'],
    },
    {
      letter: 'H',
      names: ['Hawaii'],
    },
    {
      letter: 'I',
      names: ['Idaho', 'Illinois', 'Indiana', 'Iowa'],
    },
    {
      letter: 'K',
      names: ['Kansas', 'Kentucky'],
    },
    {
      letter: 'L',
      names: ['Louisiana'],
    },
    {
      letter: 'M',
      names: [
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
      ],
    },
    {
      letter: 'N',
      names: [
        'Nebraska',
        'Nevada',
        'New Hampshire',
        'New Jersey',
        'New Mexico',
        'New York',
        'North Carolina',
        'North Dakota',
      ],
    },
    {
      letter: 'O',
      names: ['Ohio', 'Oklahoma', 'Oregon'],
    },
    {
      letter: 'P',
      names: ['Pennsylvania'],
    },
    {
      letter: 'R',
      names: ['Rhode Island'],
    },
    {
      letter: 'S',
      names: ['South Carolina', 'South Dakota'],
    },
    {
      letter: 'T',
      names: ['Tennessee', 'Texas'],
    },
    {
      letter: 'U',
      names: ['Utah'],
    },
    {
      letter: 'V',
      names: ['Vermont', 'Virginia'],
    },
    {
      letter: 'W',
      names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming'],
    },
  ];
  stateGroupOptions: Observable<StateGroup[]>;
  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe(
      startWith(''),
      map(value => this._filterGroup(value || '')),
    );
  }
  private _filterGroup(value: string): StateGroup[] {
    if (value) {
      return this.stateGroups
        .map(group => ({letter: group.letter, names: _filter(group.names, value)}))
        .filter(group => group.names.length > 0);
    }
    return this.stateGroups;
  }
}

Ausgang:

AngularJS Autocomplete Using Angular Material

Hier listen wir die Namen der Staaten auf und verwenden dann ngOnInit(), um die Listen zum Leben zu erwecken, sobald wir uns auf die Suchleiste konzentrieren. Dann schlägt die Funktion _filterGroup mit jedem Buchstaben, den wir in die Suchleiste eingeben, den nächstgelegenen Staat vor.

Abschluss

Wir können die Autocomplete-Funktion mit den besprochenen Methoden anders anwenden. Darüber hinaus können wir die Autocomplete-Funktion für viele Situationen anwenden, insbesondere wenn es um große Datenmengen geht.

Autor: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

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.

LinkedIn

Verwandter Artikel - Angular Bootstrap