Angular 点击按钮打开自动完成
我正在Angular2应用程序中使用ofer的自动完成 我想要一种行为,即键入时自动完成不会自动打开,但我需要按下一个按钮,然后自动完成才会发出服务器请求并显示我尝试实现CompleterData的下拉列表:Angular 点击按钮打开自动完成,angular,typescript,ionic-framework,ionic2,Angular,Typescript,Ionic Framework,Ionic2,我正在Angular2应用程序中使用ofer的自动完成 我想要一种行为,即键入时自动完成不会自动打开,但我需要按下一个按钮,然后自动完成才会发出服务器请求并显示我尝试实现CompleterData的下拉列表: import { Http, Response } from "@angular/http"; import { Subject } from "rxjs/Subject"; import { HttpClient } from './shared'; import { Completer
import { Http, Response } from "@angular/http";
import { Subject } from "rxjs/Subject";
import { HttpClient } from './shared';
import { CompleterData, CompleterItem } from 'ng2-completer';
export class AddressData extends Subject<CompleterItem[]> implements CompleterData {
private url: string;
constructor(private http: HttpClient, public erpIDParent: number, url: string) {
super();
this.url = url;
}
public setErpIDParent(erpIDParent: number) {
this.erpIDParent = erpIDParent;
}
public search(term: string): void {
console.log('searching');
if (this.erpIDParent > 0) {
this.http.get(`${this.url}${term}&erpIDParent=${this.erpIDParent}`)
.map((res: Response) => {
// Convert the result to CompleterItem[]
let data = res.json();
let matches: CompleterItem[] = data.map((address: any) => {
return {
originalObject: address,
title: address.Name
}
});
console.log(matches);
this.next(matches);
})
.subscribe();
}
}
public cancel() {
// Handle cancel
}
}
因此,它将手动启动搜索,但它似乎没有按照我想要的方式工作。下拉列表立即显示和隐藏。有什么方法可以解决这个问题吗?有一种方法,尽管这是一种解决方法,但不确定最终结果是否足够好 您需要一个自定义CompleterDatacomponent来处理搜索,这将为您提供一种控制何时执行搜索的方法:
export class CustomData extends Subject<CompleterItem[]> implements CompleterData {
public doSearch = false;
constructor(private http: Http) {
super();
}
public search(term: string): void {
if (this.doSearch) {
this.http.get("http://example.com?term=" + term)
.map((res: Response) => {
// Convert the result to CompleterItem[]
let data = res.json();
let matches: CompleterItem[] = data.map((item: any) => this.convertToItem(item));
this.next(matches);
})
.subscribe();
} else {
// if we don't do the search return empty results
this.next([]);
}
}
}
现在,当您想要进行搜索时,可以在数据提供程序上设置doSearch,它将开始工作
最后一部分是将焦点设置回完成符,并在激活后再次执行搜索:
在您的组件中:
@ViewChild("completer") private completer: CompleterCmp;
protected startSearch() {
this.datasource.doSearch = true;
this.completer.focus();
this.datasource.search(this.searchStr);
}
这是一个极好的例子。谢谢您:
export class CustomData extends Subject<CompleterItem[]> implements CompleterData {
public doSearch = false;
constructor(private http: Http) {
super();
}
public search(term: string): void {
if (this.doSearch) {
this.http.get("http://example.com?term=" + term)
.map((res: Response) => {
// Convert the result to CompleterItem[]
let data = res.json();
let matches: CompleterItem[] = data.map((item: any) => this.convertToItem(item));
this.next(matches);
})
.subscribe();
} else {
// if we don't do the search return empty results
this.next([]);
}
}
}
<ng2-completer #completer [(ngModel)]="searchStr" [datasource]="datasource" [minSearchLength]="0" [textNoResults]="false" [textSearching]="false"></ng2-completer>
@ViewChild("completer") private completer: CompleterCmp;
protected startSearch() {
this.datasource.doSearch = true;
this.completer.focus();
this.datasource.search(this.searchStr);
}