我在Angular2应用程序中使用了ofer的自动完成功能
https://github.com/oferh/ng2-completer
我想要一种行为,其中自动完成不会在键入时自动打开,但我需要按一个按钮,然后只有那时自动完成发出服务器请求并显示我尝试实现CompleterData的下拉列表:
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
}
}
并将minSearchLength保持为1000
<ng2-completer placeholder="{{ 'NewOrder.typeToSearch' | translate }}" formControlName="address" [(ngModel)]="address" [datasource]="addressDataService" (selected)="addressSelected($event)" [minSearchLength]="1000"></ng2-completer>
所以它不会发送服务器请求然后在我的按钮单击我有这个代码:
searchAddresses() {
this.addressDataService.search(this.address);
}
所以它会手动启动搜索,但似乎没有按照我想要的方式工作 . 下拉列表即时显示和隐藏 . 有没有什么办法解决这一问题?
1 回答
有一种方法虽然它是一种解决方法,但不确定最终结果是否足够好 .
您将需要一个自定义
CompleterData
组件来处理搜索,这将为您提供一种控制何时执行搜索的方法:由于调用了搜索,我们需要阻止显示搜索而不显示结果文本,因此我们将
textSearching
和textNoResults
设置为false现在,当您想要进行搜索时,您可以在数据提供程序上设置
doSearch
,它将开始工作 .最后一部分是将焦点设置回完成者并在激活时再次进行搜索:
在您的组件中:
这是plunker example