打開汽車上點擊按鈕

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

因此將手動啓動搜索，但它似乎沒有工作，我想要的方式至。下拉菜單顯示並立即隱藏。有沒有什麼辦法解決這一問題？

來源

2017-06-06 Tim Liberty

雖然這是一種解決方法，但不確定最終結果是否足夠好。

你需要一個自定義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

來源

2017-06-08 11:56:52

優秀。謝謝：） –

打開汽車上點擊按鈕

回答

相關問題