单击按钮打开自动完成答案

【问题标题】：Open auto complete on click on button单击按钮打开自动完成
【发布时间】：2017-06-06 05:50:02
【问题描述】：

我在 Angular2 应用中使用了提供的自动完成功能

我希望自动完成在键入时不会自动打开，但我需要按下一个按钮，然后自动完成才应该发出服务器请求并显示我尝试实现 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);
    }

所以它会手动开始搜索，但它似乎没有按照我想要的方式工作。下拉菜单立即显示和隐藏。有没有办法解决这个问题？

【问题讨论】：

标签： angular typescript ionic-framework ionic2

【解决方案1】：

有一种方法，虽然它是一种解决方法，但不确定最终结果是否足够好。

您需要一个自定义的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([]);
      }
    }
}

由于调用了搜索，我们需要防止显示搜索和无结果文本，因此我们将textSearching 和textNoResults 设置为false

<ng2-completer #completer [(ngModel)]="searchStr" [datasource]="datasource" [minSearchLength]="0" [textNoResults]="false" [textSearching]="false"></ng2-completer>

现在，当您想要进行搜索时，您可以在数据提供者上设置doSearch，它将开始工作。

最后一部分是将焦点设置回完成者，并在激活时再次进行搜索：

在你的组件中：

 @ViewChild("completer") private completer: CompleterCmp;

   protected startSearch() {
       this.datasource.doSearch = true;
       this.completer.focus();
       this.datasource.search(this.searchStr);
   }

这是plunker example

【讨论】：

优秀。谢谢你:)