Creating An Autocomplete Textbox In Angular

Introduction

I have seen in some web crawlers and sites that while I am writing the initial two letters of a word, it demonstrates a recommended run down to choose. These auto-finish content boxes are for the most part utilized as a part of ongoing tasks to expand client intuitiveness with the site. Presently, in this post, we will take a gander at how this is executed in Angular4 using TypeScript.

For instance, we should discuss the Google auto-finish look box. Here, the proposed results will come in view of the past list items or most looked outcomes.

Executing Auto Complete Textbox in Angular

To execute an auto-finish content box in Angular with a textbox, we need to create an Angular application. In this application, I am getting the information recommendation from the service. Here are some references which can help you make and configure Angular project.

Steps to complete auto-complete text box task include -

First of all, you need to install node.js and VS code on your system. Create an Angular application using Angular CLI command. If you are still facing issues to create a simple "Hello world" application with all configurations, click here...

Follow some steps to create autocomplete textbox using Angular.

Step 1

Create ASP.NET WEBAPI to get data from database. Now, I am getting clientList from API.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace ApplicationAPI.Controllers
{
[RoutePrefix("api/Client")]
public class ClientController : ApiController
{
MVCRSTechEntities _context = new MVCRSTechEntities();
[Route("GetClientList/term")]
public IHttpActionResult GetClientList(string term)
{
var clientList = from c in _context.Clients
where c.ClientName.Contains(term)
select c;
return Ok(clientList);
}
}
}

So now, I am consuming endpoint http://localhost:52386/api/Client/GetClientList/term?term=a.

If you don't want to waste your time to create API, just use this JSON to get the client list according to any string word. Save this JSON in your project name as Client.josn and set path inside http.get() method.

Client.Json

[
{
"ClientId": 11,
"ClientName": "Hytech Professionals"
},
{
"ClientId": 12,
"ClientName": "RVS IT Consulting"
},
{
"ClientId": 13,
"ClientName": "MCN Solution"
},
{
"ClientId": 24,
"ClientName": "C# Corner"
},
{
"ClientId": 27,
"ClientName": "Birla sunlife"
},
{
"ClientId": 28,
"ClientName": "Global Logic"
}
]

Otherwise, you can use the API to get data from the database. Here, both the options are avilable - you can choose any API or JSON directly.

Step 2

Create an Angular application using Angular-CLI (ng new project_name) with a single line of command.

Step 3

In Angular, the default application replaces app.component.html. See code below,

src=>app=>app.component.html

<label class="col-sm-4 col-md-8 text-right control-label vertical-label" for="inputPassword3"> Select Client Name</label>
<div class="col-sm-8 col-md-4 text-right">
<div class="form-group">
<div class="input-group">
<input class="form-control" *ngIf="flag" type="text" [(ngModel)]="ClientName" (keyup)="searchClient(ClientName)" />
<input class="form-control" [(ngModel)]="ClientName" disabled *ngIf="!flag" type="text" />
</div>
</div>
<div class="search-result" *ngIf="flag">
<ul>
<li *ngFor="let client of clients | async">
<a (click)="onselectClient(client)">{{client.ClientName}}</a>
</li>
</ul>
</div>
</div>

In HTML part, I have created a textbox and applied changes to create autocomplete textbox accordingly.

Step 4

Use app.component.ts to write logic. Just replace the code with the following.

src=>app=>app.component.ts

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { ClientSearchService } from './_services/client-search.service';
@Component({
selector: 'client-search',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
public clients: Observable<any[]>;
private searchTerms = new Subject<string>();
public ClientName = '';
public flag: boolean = true;
constructor(
private clientSearchService: ClientSearchService,
) {
}
ngOnInit(): void {
this.clients = this.searchTerms
.debounceTime(300) // wait for 300ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous
.switchMap(term => term // switch to new observable each time
// return the http search observable
? this.clientSearchService.search(term)
// or the observable of empty heroes if no search term
: Observable.of<any[]>([]))
.catch(error => {
// TODO: real error handling
console.log(error);
return Observable.of<any[]>([]);
});
}
// Push a search term into the observable stream.
searchClient(term: string): void {
this.flag = true;
this.searchTerms.next(term);
}
onselectClient(ClientObj) {
if (ClientObj.ClientId != 0) {
this.ClientName = ClientObj.ClientName;
this.flag = false;
}
else {
return false;
}
}
}

Step 5

Create Service folder name is _services => client-search.service.ts and inside this TS file, write the code to consume WebAPI.

src=>app=>_services=>client-search.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
@Injectable()
export class ClientSearchService {
endPoint: string;
constructor(private http: Http) {
this.endPoint = "http://localhost:52386/api/Client/GetClientList/term";
}
search(term: string): Observable<any[]> {
var ClientList = this.http.get(this.endPoint + '?term=' + term)
.map((r: Response) => { return (r.json().length != 0 ? r.json() : [{ "ClientId": 0, "ClientName": "No Record Found" }]) as any[] });
return ClientList;
}
}

Step 6

Now, we need some changes in app.module.ts. We need to register service in provider.

src=>app=>app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ClientSearchService } from './_services/client-search.service';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule, HttpModule
],
providers: [ClientSearchService],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 7

To make it more attractive, use CSS. Copy this code and paste it on index.html page.To add CSS file, download the project from this article.

src=>index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/css/custom.css" rel="stylesheet" />
<link href="/assets/css/AdminLTE.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="/assets/css/skins/_all-skins.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="icon" type="image/gif" href="assets/img/animated_favicon1.gif">
</head>
<body>
<client-search></client-search>
</body>
</html>

You can see here on the index.html, I am using component client-search as tag.

Step 8

I think we are all set to run the application but be sure, you've installed all packages from npm. If not, use command "npm install" after npm which will create a new folder in your root folder with the name "node_module".

Step 9

Now, we are ready to run the application. Open the termiinal and run command "npm start" or "ng serve".

Step 10

Remember if Chrome browser is not opening by default, type http://localhost:4200/. You'll see output in your browser like this.

Conclusion

According to this image type, any word or character in the textbox result will show. Data is coming from database according to search word 's'. I hope, your application is working and I am sure you learned a simple trick to make the textbox auto-complete using Angular and TypeScript. If you are still facing any error or issue, download the attached project.

6 Comments

Join the conversation! Your thoughts help the community grow.

Jaganmohan Reddy Bussareddy7y ago
Its working but the result is not changing based on given input
Gaurav Srivastava8y ago
Very Nice Sir...i want to create API in node js and mongo DB then how we can do....please help me
Aditya Vartak8y ago
Awesome Really Helped me in Creating this autocomplete component textbox
Venkatesh9y ago
Nice , but how do I research again
- Bikesh Srivastava9y ago
  Just remove all and type text.
Hamid Khan9y ago
Nice..................