角2自動提示可編輯的股利和RxJS

Question

我有一個簡單的可編輯的div：

<div #editable editable=true (keypress)='seach(editable.innerText)'></div> 

在我的組件類我有搜索方法：

.... 
.... 
search(event: any) { 
Observable.from(event) 
    .debounceTime(200) 
    .distinctUntilChanged() 
    .switchMap((query: any) => this.myService.searchUser(query)) 
    .subscribe((response: any) => {this.results = response.data;     }); 

} 

的問題是，搜索查詢只用一個字母來執行。如何保持我的流的以前的值？例如，如果我搜索「家」中，SEACH方法將執行「H」然後「O」，那麼「U」 ...等

Answer 1

你可以做這樣的：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <div #editable contenteditable=true (keyup)='search(editable.innerText)'>test</div> 
     <div #editable contenteditable=true (keyup)='_searchSubject.next(editable.innerText)'>inline without search function</div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    private results; 
    private _searchSubject = new BehaviorSubject<string>(''); 

    ngOnInit() { 
    this._searchSubject 
     .debounceTime(200) 
     .distinctUntilChanged() 
     .subscribe(input => console.log(input)); 
     // dont want to fake it.. :) 
     //.switchMap((query: any) => this.myService.searchUser(query)) 
     //.subscribe((response: any) => { 
     // this.results = response.data; 
     //}); 
    } 

    search(val: any) { 
    console.log('search', val); 
    this._searchSubject.next(val); 
    } 
} 

• 使用(keyup)代替(keypress) =>否則你不會得到最後的關鍵
• 使用一個全球性的主題訂閱和搜索功能使用next

工作演示：https://plnkr.co/edit/xYkU0QGZnsSaa38EQcDd?p=preview

UPDATE

要過濾 「空」 的投入，像這樣做：

ngOnInit() { 
    this._searchSubject 
     .debounceTime(200) 
     .distinctUntilChanged() 
     .filter(input => input) // BUT can lead to weird behaviors???! 
     .subscribe(input => console.log('"' + input + '"')); 
     // dont want to fake it.. :) 
     //.switchMap((query: any) => this.myService.searchUser(query)) 
     //.subscribe((response: any) => { 
     // this.results = response.data; 
     //}); 
}