私はシンプルな編集可能なのdiv持って編集可能なDIVとRxJS

Question

と角度2オートサジェスト：私のコンポーネントクラスで

<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;     }); 

} 

問題は、検索クエリがあるということです一文字だけで実行されます。ストリームの以前の値を保持するにはどうしたらいいですか？私は「家」を検索すると、たとえば、さがす方法は、その後、「O」「U」「をH」を実行します...など

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); 
    } 
} 

• 01：それ以外の場合はあなたが文句を言わない
• 最後のキーがnext

検索機能に取り組んでデモを購読して使用するためにグローバルな主題を使用し得る (keyup)代わりの (keypress) =>を使用します

"空" の入力をフィルタリングするために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; 
     //}); 
}