打开汽车上点击按钮

问题描述：

完成我使用奥弗的自动完成在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); 
    }

因此将手动启动搜索，但它似乎没有工作，我想要的方式至。下拉菜单显示并立即隐藏。有没有什么办法解决这一问题？

答

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

你需要一个自定义CompleterData组件将处理的搜索，这将为您提供一种方法来控制何时执行搜索：

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假

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

现在，当你想要做的，你可以在数据提供程序设置doSearch搜索，它会开始worki NG。

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

在组件：

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

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

这里是一个plunker example

优秀。谢谢：） –

打开汽车上点击按钮

相关推荐