Autocompletar AngularJS
- Implementar el autocompletado de AngularJS mediante la API REST y Bootstrap
-
Implemente el autocompletado de AngularJS usando el módulo
ng-autocomplete - Implementar el autocompletado de AngularJS usando material angular
- Conclusión
La función de autocompletar es una función que hace la vida más fácil por varias razones. Hace que sea más fácil y rápido escribir textos porque a medida que se escriben letras en la barra de entrada, se muestran sugerencias y predicciones de palabras que estamos tratando de hacer.
Además, si deseamos verificar que un nombre en particular se encuentra entre una lista de nombres, la función de autocompletar sugerirá los nombres a medida que escribimos, lo que hará que sea más rápido revisar la lista, como un pseudo Ctrl+F.
En el marco Angular, hay diferentes formas de poner en uso la función de autocompletar.
Implementar el autocompletado de AngularJS mediante la API REST y Bootstrap
Para crear la función de autocompletar en este método, obtendremos la estructura y el estilo de Bootstrap. Luego obtendremos los datos que buscaremos usando la API REST.
Para empezar, crearemos un nuevo archivo usando ng new autocompletar, luego necesitamos crear un archivo de servicio. Este es el archivo donde colocaremos los códigos que obtendrán datos mediante la API REST.
A continuación, nos dirigimos a getbootstrap.com, hacemos clic en Comenzar y luego, debajo del encabezado CSS, copiamos el enlace y lo pegamos dentro de la etiqueta head del archivo index.html, como se ve a continuación:
Fragmento de código- 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>
Luego navegamos al archivo app.component.html para crear la estructura de la página con Bootstrap. En la página de Bootstrap, busque “autocompletar”, copie el fragmento de código en “Listas de datos” y péguelo.
Luego, ajustaremos el fragmento de código para acomodar los datos que buscaremos, como se muestra a continuación:
Fragmento de código- 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>
Usaremos la función ngFor para renderizar la página web con los diferentes nombres que seleccionemos de nuestra lista. Luego construimos el código en el app.component.ts para obtener los datos que generamos del archivo auto.service.ts; Al final, debería quedar así:
Fragmento de código- 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);
}
}
El app.module.ts es donde importamos las dependencias/módulos que necesitamos para que nuestra aplicación funcione, por lo que nuestro app.module.ts debería verse así:
Fragmento de código- 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 {}
Ahora necesitamos generar los datos que queremos usar en la aplicación de autocompletar. Desde la terminal, dentro de la carpeta project, instalamos el archivo service con ng g s auto.
El archivo debe estar entre los archivos componentes dentro de la carpeta src » app. Navegamos hasta el archivo y ponemos estos códigos:
Fragmento de código- 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);
}
}
Dentro del archivo service, declaramos la URL de la que obtener los datos y usamos la función getData() para obtener los datos.
Para hacer que la página web sea hermosa, podemos agregar el estilo a continuación al archivo app.component.ts, así:
Fragmento de código- 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;
}
Producción:
Implemente el autocompletado de AngularJS usando el módulo ng-autocomplete
Usando este método, instalaremos el módulo autocomplete de Angular. Después de crear una nueva carpeta de proyecto, instalaremos un nuevo módulo Angular con npm install angular-ng-autocomplete.
Luego nos dirigimos a npmjs.com/package/angular-ng-autocomplete y copiamos la muestra de uso en el archivo app.component.html, como se muestra a continuación:
Fragmento de código- 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>
Luego, dentro del archivo app.component.ts, crearemos la lista de nombres que queremos usar dentro de la aplicación web de autocompletar en forma de matriz, como se ve a continuación:
Fragmento de código- 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){
}
}
El controlador de eventos onFocused se activa una vez que hacemos clic en la barra de búsqueda, luego la función selectEvent muestra el elemento que hemos seleccionado de la lista.
Luego, dentro de app.module.ts, importamos los módulos que instalamos anteriormente, como se ve a continuación:
Fragmento de código- 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 { }
Producción:
Implementar el autocompletado de AngularJS usando material angular
El material Angular nos proporciona componentes Angular listos para usar para aplicaciones web, y en este ejemplo, usaremos el módulo autocomplete.
Después de haber creado una nueva carpeta de project, navegamos a la carpeta project e instalamos el material Angular con ng add @angular/material. Luego visitamos material.angular.io, hacemos clic en Comenzar, Componentes y seleccionamos Autocompletar.
En la pestaña de ejemplos, estamos usando la de Estados, por lo que copiamos los fragmentos de código HTML en nuestro app.component.html, como se muestra a continuación:
Fragmento de código- 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>
Esto hace que la estructura de nuestra página, para ser exactos, sea la barra de búsqueda de States.
Luego, dentro de app.module.ts, importamos los módulos para nuestros componentes de autocomplete, el campo de formulario para la lista de Estados como módulo de entrada. El archivo se verá como se ve a continuación:
Fragmento de código- 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 { }
El archivo app.component.ts contendrá el código principal de nuestra aplicación. Aún así, en el sitio web de Angular, copiamos los fragmentos de código TS del ejemplo de Estados y los colocamos dentro de la clase export del AppComponent.
Antes de eso, copiamos la primera parte del fragmento de código TS, el export interface StateGroup, justo después de las importaciones. El archivo app.component.ts debe tener códigos, como se muestra a continuación:
Fragmento de código- 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;
}
}
Producción:
Aquí, enumeramos los nombres de los estados y luego usamos ngOnInit() para activar las listas una vez que nos enfocamos en la barra de búsqueda. Luego, la función _filterGroup sugiere el Estado más cercano con cada letra que ingresamos en la barra de búsqueda.
Conclusión
Podemos aplicar la función de autocompletar de manera diferente usando los métodos que hemos discutido. Además, podemos aplicar la función de autocompletar para muchas situaciones, especialmente cuando se trata de grandes cantidades de datos.
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