Your search did not match any results.
Autocomplete

Overview

Documentation
The Autocomplete widget is a textbox that provides suggestions while a user types into it.
Apply
Reset
<div class="form"> <div class="dx-fieldset"> <div class="dx-fieldset-header">Default Mode</div> <div class="dx-field"> <div class="dx-field-label">First Name</div> <div class="dx-field-value"> <dx-autocomplete placeholder="Type first name..." [(value)]="firstName" [dataSource]="names" (onValueChanged)="updateEmployeeInfo($event)"> </dx-autocomplete> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">With Clear Button</div> <div class="dx-field"> <div class="dx-field-label">Last Name</div> <div class="dx-field-value"> <dx-autocomplete placeholder="Type last name..." [showClearButton]="true" [dataSource]="surnames" [(value)]="lastName" (onValueChanged)="updateEmployeeInfo($event)"> </dx-autocomplete> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Disabled</div> <div class="dx-field"> <div class="dx-field-label">Position</div> <div class="dx-field-value"> <dx-autocomplete [disabled]="true" [value]="position" [dataSource]="positions"> </dx-autocomplete> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">With Custom Search Options</div> <div class="dx-field"> <div class="dx-field-label">City</div> <div class="dx-field-value"> <dx-autocomplete #cityd placeholder="Type two symbols to search..." [minSearchLength]="2" [searchTimeout]="500" [dataSource]="cities" [(value)]="city" (onValueChanged)="updateEmployeeInfo($event)"> </dx-autocomplete> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Custom Item Template and Data Source Usage</div> <div class="dx-field"> <div class="dx-field-label">State</div> <div class="dx-field-value"> <dx-autocomplete placeholder="Type state name..." valueExpr="State_Long" [dataSource]="states" [(value)]="state" (onValueChanged)="updateEmployeeInfo($event)"> <div *dxTemplate="let item of 'item'"> <span>{{item.State_Long}} ({{item.State_Short}})</span> </div> </dx-autocomplete> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="employees-data"> Employee data: <span>{{fullInfo}}</span> </div> </div> </div>
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxAutocompleteModule, DxTemplateModule } from 'devextreme-angular'; import data from 'devextreme/data/odata/store'; import { Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { names: string[]; surnames: string[]; positions: string[]; cities: string[]; states: any; firstName = ""; lastName = ""; position: string; city = ""; state = ""; fullInfo = ""; constructor(service: Service) { this.states = new data({ url: "https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short", key: "Sate_ID", keyType: "Int32" }); this.names = service.getNames(); this.surnames = service.getSurnames(); this.positions = service.getPositions(); this.cities = service.getCities(); this.position = this.positions[0]; } updateEmployeeInfo() { var result = ""; result += ((this.firstName || "") + " " + (this.lastName || "")).trim(); result += (result && this.position) ? (", " + this.position) : this.position; result += (result && this.city) ? (", " + this.city) : this.city; result += (result && this.state) ? (", " + this.state) : this.state; this.fullInfo = result; } } @NgModule({ imports: [ BrowserModule, DxAutocompleteModule, DxTemplateModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ .employees-data { padding-top: 16px; padding-bottom: 10px; }
import { Injectable } from '@angular/core'; export class Data { names: string[]; surnames: string[]; positions: string[]; cities: string[] } let data: Data = { names: [ "James", "John", "Robert", "Michael", "William", "David", "Richard", "Charles", "Joseph", "Thomas", "Christopher", "Daniel", "Paul", "Mark", "Donald", "George", "Kenneth", "Steven", "Edward", "Brian", "Ronald", "Anthony", "Kevin", "Jason", "Jeff", "Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria", "Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty", "Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle", "Laura", "Sarah", "Kimberly", "Deborah" ], surnames: [ "Anderson", "Smith", "Johnson", "Williams", "Jones", "Brown", "Davis", "Miller", "Wilson", "Moore", "Taylor", "Thomas", "Jackson", "White", "Harris", "Martin", "Thompson", "Garcia", "Martinez", "Robinson", "Clark", "Rodriguez", "Lewis", "Lee", "Walker", "Hall", "Allen", "Young", "Hernandez", "King", "Wright", "Lopez", "Hill", "Scott", "Green", "Adams", "Baker", "Gonzalez", "Nelson", "Carter", "Mitchell", "Perez", "Roberts", "Turner", "Phillips", "Campbell", "Parker", "Evans", "Edwards", "Collins"], positions: [ "CEO", "COO", "CTO", "CMO", "HR Manager", "IT Manager", "Controller", "Sales Manager", "Support Manager"], cities: [ "New York", "Los Angeles", "Chicago", "Houston", "Philadelphia", "Phoenix", "San Antonio", "San Diego", "Dallas", "San Jose", "Austin", "Indianapolis", "Jacksonville", "San Francisco", "Columbus", "Charlotte", "Fort Worth", "Detroit", "El Paso", "Memphis", "Seattle", "Denver", "Washington", "Boston", "Nashville", "Baltimore", "Oklahoma City", "Louisville", "Portland", "Las Vegas", "Milwaukee", "Albuquerque", "Tucson", "Fresno", "Sacramento", "Long Beach", "Kansas City", "Mesa", "Virginia Beach", "Atlanta", "Colorado Springs", "Omaha", "Raleigh", "Miami", "Oakland", "Minneapolis", "Tulsa", "Cleveland", "Wichita", "Arlington", "New Orleans", "Bakersfield", "Tampa", "Honolulu", "Aurora", "Anaheim", "Santa Ana", "St. Louis", "Riverside", "Corpus Christi", "Lexington", "Pittsburgh", "Anchorage", "Stockton", "Cincinnati", "Saint Paul", "Toledo", "Greensboro", "Newark", "Plano", "Henderson", "Lincoln", "Buffalo", "Jersey City", "Chula Vista", "Fort Wayne", "Orlando", "St. Petersburg", "Chandler", "Laredo", "Norfolk", "Durham", "Madison", "Lubbock", "Irvine", "Winston–Salem", "Glendale", "Garland", "Hialeah", "Reno", "Chesapeake", "Gilbert", "Baton Rouge", "Irving", "Scottsdale", "North Las Vegas", "Fremont", "Boise", "Richmond"] }; @Injectable() export class Service { getNames() { return data.names; } getSurnames() { return data.surnames; } getPositions() { return data.positions; } getCities() { return data.cities; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@17.1', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.win10.white.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>