Getting Started
20 Jul 201719 minutes to read
The Angular AutoComplete control is a textbox control that provides a list of suggestions based on your query. When you enter text into the text box, the control performs a search operation and provides a list of results. There are several filter types available to perform the search.
This section helps to understand the getting started of the Angular AutoComplete with the step-by-step instructions.
Create an Angular AutoComplete
Create a new HTML file and include the below code:
<!DOCTYPE html>
<html>
<head>
<link href="//cdn.syncfusion.com/14.3.0.49/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
</script>
<script src ="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.angular2.min.js"></script>
<script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<ej-app>Loading...</ej-app>
</body>
</html>Create input element and add in the body tag as below.
<div class="container" style="padding-top:100px">
<div style="padding-left:100px;font-weight: 700;">Car Details</div><br/><br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Car:</p>
</div>
<div class="col-md-8">
<input type="text" id="auto" ej-autocomplete />
</div>
</div>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Price:</p>
</div>
<div class="col-md-8">
<input type="text" ej-autocomplete />
</div>
</div>To render the Angular AutoComplete using below code.
import {Component,NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
constructor() {}
}
Model binding
The Angular AutoComplete supports the data binding feature. When a widget’s model attribute is bound to ngModel variable, it will be reflected the changes both ways.
Add in the ngModel value as below.
<div class="container" style="padding-top:100px">
<div style="padding-left:100px;font-weight: 700;">Car Details</div><br/><br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Car:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" id="auto" ej-autocomplete [(ngModel)]="value" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Price:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" ej-autocomplete [(ngModel)]="valueText" />
</div>
</div>import {Component,NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
value: string;
valueText:Number;
constructor() {
this.value = "Jaguar XJS";
this.valueText=29908.18;
}
}
Data binding
The data for the suggestion list can be populated using the dataSource property.
<div class="container" style="padding-top:100px">
<div style="padding-left:100px;font-weight: 700;">Car Details</div><br/><br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Car:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" id="auto" ej-autocomplete [dataSource]="dataList" [fields]="nameField" [(ngModel)]="value" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Price:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" ej-autocomplete [dataSource]="dataList" [fields]="priceField" [filterType]="greaterthanorequal" [(ngModel)]="valueText" />
</div>
</div>import {Component,NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
value: string;
priceField:any;
valueText:Number;
nameField:any;
dataList:Array<{Price:Number,Mileage:Number,Cylinder:Number,Doors:Number,Name:string}>;
constructor() {
this.value = "Jaguar XJS";
this.dataList = [{Price:22661.05,Mileage:20105,Cylinder:6,Doors:4,Name:"Acura"},
{Price:21725.01,Mileage:13457,Cylinder:6,Doors:2,Name:"Alfa Romeo"},
{Price:29142.71,Mileage:31655,Cylinder:4,Doors:2,Name:"Aston Martin"},
{Price:30731.94,Mileage:22479,Cylinder:4,Doors:2,Name:"Audi S6"},
{Price:33358.77,Mileage:17590,Cylinder:4,Doors:2,Name:"BMW 7"},
{Price:30315.17,Mileage:23635,Cylinder:4,Doors:2,Name:"Bentley Mulsanne"},
{Price:33381.82,Mileage:17381,Cylinder:4,Doors:2,Name:"Bugatti Veyron"},
{Price:30251.02,Mileage:27558,Cylinder:4,Doors:2,Name:"Chevrolet Camaro"},
{Price:30166.85,Mileage:25049,Cylinder:4,Doors:2,Name:"Cadillac"},
{Price:27060.14,Mileage:17319,Cylinder:4,Doors:4,Name:"Duesenberg J"},
{Price:26841.08,Mileage:10003,Cylinder:4,Doors:4,Name:"Dodge Sprinter"},
{Price:25790.51,Mileage:21160,Cylinder:4,Doors:4,Name:"Elantra"},
{Price:25148.38,Mileage:22272,Cylinder:4,Doors:4,Name:"Excavator"},
{Price:24173.53,Mileage:27015,Cylinder:4,Doors:4,Name:"Ford Boss 302"},
{Price:24852.5,Mileage:22814,Cylinder:4,Doors:4,Name:"Ferrari 360"},
{Price:27825.95,Mileage:10014,Cylinder:4,Doors:4,Name:"Ford Thunderbird"},
{Price:26698.08,Mileage:23055,Cylinder:4,Doors:4,Name:"GAZ Siber"},
{Price:28185.78,Mileage:19854,Cylinder:4,Doors:4,Name:"Jaguar XJS"},
{Price:27241.44,Mileage:23204,Cylinder:4,Doors:4,Name:"Maruti Alto 800"},
{Price:30800.66,Mileage:8017,Cylinder:4,Doors:4,Name:"Porsche 356"},
{Price:28416.46,Mileage:14613,Cylinder:4,Doors:4,Name:"Scion SRS/SC/SD"},
{Price:26653.24,Mileage:22590,Cylinder:4,Doors:4,Name:"Saab Sportcombi"},
{Price:27610.86,Mileage:22881,Cylinder:4,Doors:4,Name:"Subaru Sambar"},
{Price:27788.81,Mileage:26786,Cylinder:4,Doors:4,Name:"Suzuki Swift"},
{Price:29986.79,Mileage:18464,Cylinder:4,Doors:4,Name:"Triumph Spitfire"},
{Price:29197.79,Mileage:20907,Cylinder:4,Doors:4,Name:"Toyota 2000GT"},
{Price:29908.18,Mileage:19830,Cylinder:4,Doors:4,Name:"Lamborghini Diablo"},
{Price:29481.53,Mileage:21822,Cylinder:4,Doors:4,Name:"Volvo P1800"},
{Price:26792.3,Mileage:25357,Cylinder:4,Doors:4,Name:"Volkswagen Shirako"}
];
this.priceField = {text:"Price"};
this.nameField = {text:"Name"};
this.valueText=29908.18;
}
}
Enable Popup Button
This button helps you to show all the available suggestions on clicking it.
<div class="container" style="padding-top:100px">
<div style="padding-left:100px;font-weight: 700;">Car Details</div><br/><br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Car:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" id="auto" ej-autocomplete [dataSource]="dataList" [fields]="nameField" [showPopupButton]="true" [(ngModel)]="value" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Price:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" ej-autocomplete [dataSource]="dataList" [fields]="priceField" [showPopupButton]="true" [filterType]="greaterthanorequal" [(ngModel)]="valueText" />
</div>
</div>
Two Way Binding
The Angular AutoComplete have supports a two-way data binding when a model variable is bound to an element that changed in both and display the value of the variable.
<div class="container" style="padding-top:100px">
<div style="padding-left:100px;font-weight: 700;">Car Details</div><br/><br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Car:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" id="auto" ej-autocomplete [dataSource]="dataList" [fields]="nameField" [showPopupButton]="true" (select)="onAutoselect($event)" [(ngModel)]="value" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-1">
<p style="font-weight: 700;">Price:</p>
</div>
<div class="col-md-1">
<p style="font-weight: 700;"></p>
</div>
<div class="col-md-8">
<input type="text" ej-autocomplete [dataSource]="dataList" [fields]="priceField" [showPopupButton]="true" [filterType]="greaterthanorequal" (select)="onAutoselect($event)" [(ngModel)]="valueText" />
</div>
</div>import {Component,NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
value: string;
priceField:any;
valueText:Number;
nameField:any;
dataList:Array<{Price:Number,Mileage:Number,Cylinder:Number,Doors:Number,Name:string}>;
constructor() {
this.value = "Jaguar XJS";
this.dataList = [{Price:22661.05,Mileage:20105,Cylinder:6,Doors:4,Name:"Acura"},
{Price:21725.01,Mileage:13457,Cylinder:6,Doors:2,Name:"Alfa Romeo"},
{Price:29142.71,Mileage:31655,Cylinder:4,Doors:2,Name:"Aston Martin"},
{Price:30731.94,Mileage:22479,Cylinder:4,Doors:2,Name:"Audi S6"},
{Price:33358.77,Mileage:17590,Cylinder:4,Doors:2,Name:"BMW 7"},
{Price:30315.17,Mileage:23635,Cylinder:4,Doors:2,Name:"Bentley Mulsanne"},
{Price:33381.82,Mileage:17381,Cylinder:4,Doors:2,Name:"Bugatti Veyron"},
{Price:30251.02,Mileage:27558,Cylinder:4,Doors:2,Name:"Chevrolet Camaro"},
{Price:30166.85,Mileage:25049,Cylinder:4,Doors:2,Name:"Cadillac"},
{Price:27060.14,Mileage:17319,Cylinder:4,Doors:4,Name:"Duesenberg J"},
{Price:26841.08,Mileage:10003,Cylinder:4,Doors:4,Name:"Dodge Sprinter"},
{Price:25790.51,Mileage:21160,Cylinder:4,Doors:4,Name:"Elantra"},
{Price:25148.38,Mileage:22272,Cylinder:4,Doors:4,Name:"Excavator"},
{Price:24173.53,Mileage:27015,Cylinder:4,Doors:4,Name:"Ford Boss 302"},
{Price:24852.5,Mileage:22814,Cylinder:4,Doors:4,Name:"Ferrari 360"},
{Price:27825.95,Mileage:10014,Cylinder:4,Doors:4,Name:"Ford Thunderbird"},
{Price:26698.08,Mileage:23055,Cylinder:4,Doors:4,Name:"GAZ Siber"},
{Price:28185.78,Mileage:19854,Cylinder:4,Doors:4,Name:"Jaguar XJS"},
{Price:27241.44,Mileage:23204,Cylinder:4,Doors:4,Name:"Maruti Alto 800"},
{Price:30800.66,Mileage:8017,Cylinder:4,Doors:4,Name:"Porsche 356"},
{Price:28416.46,Mileage:14613,Cylinder:4,Doors:4,Name:"Scion SRS/SC/SD"},
{Price:26653.24,Mileage:22590,Cylinder:4,Doors:4,Name:"Saab Sportcombi"},
{Price:27610.86,Mileage:22881,Cylinder:4,Doors:4,Name:"Subaru Sambar"},
{Price:27788.81,Mileage:26786,Cylinder:4,Doors:4,Name:"Suzuki Swift"},
{Price:29986.79,Mileage:18464,Cylinder:4,Doors:4,Name:"Triumph Spitfire"},
{Price:29197.79,Mileage:20907,Cylinder:4,Doors:4,Name:"Toyota 2000GT"},
{Price:29908.18,Mileage:19830,Cylinder:4,Doors:4,Name:"Lamborghini Diablo"},
{Price:29481.53,Mileage:21822,Cylinder:4,Doors:4,Name:"Volvo P1800"},
{Price:26792.3,Mileage:25357,Cylinder:4,Doors:4,Name:"Volkswagen Shirako"}
];
this.priceField = {text:"Price"};
this.nameField = {text:"Name"};
this.valueText=29908.18;
}
onAutoselect(event) {
if(event.item) {
this.valueText = event.item.Price;
this.value = event.item.Name;
}
}
}