EasyUI 自动完成(AutoComplete)

组合框 ComboBox

源代码

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
	selector: 'app-root',
	template: `
		<h2>AutoComplete</h2>
		<p>The suggestion data will be updated after typing a minimum number of characters</p>
		<label [for]="combo" align="top">Select a City:</label>
		<eui-combobox #combo placeholder="Search a City..." style="width:300px"
				[lazy]="true" 
				[data]="data" 
				[limitToList]="false"
				[hasDownArrow]="false" 
				(filterChange)="onFilterChange($event)"></eui-combobox>
	`,
	providers: [DataService]
})
export class AppComponent {
	data: any[] = [];

	constructor(public dataService: DataService){}

	onFilterChange(event) {
		let q = event.filterValue || '';
		if (q.length >= 3){
			this.dataService.getData(q).subscribe(items => this.data = items);
		}
	}

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule,JsonpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';

import { AppComponent } from './app.component';

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

import { Injectable } from '@angular/core';
import { Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
	constructor(private jsonp: Jsonp){}

	getData(term: string) {
		let url = 'http://gd.geobytes.com/AutoCompleteCity?callback=JSONP_CALLBACK';
		url += '&q=' + term;
		return this.jsonp.get(url)
				.map(response => {
					let data = response.json().filter((item) => item.trim());
					if (data.length){
						return data.map((item) => {
							return {value: item, text: item}
						});
					} else {
						return null;
					}
				});
	}
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);