Having difficulty combining observables in my implementation of a tags-input feature.
this._allTags represent all available tags.
I am working with 4 streams:
this._suggestions = new this.rx.Subject;
this._searchText = new this.rx.Subject;
this._selectedIndex = new this.rx.Subject;
this._eventsStream = new this.rx.Subject;
For the search method:
search(searchText) {
this._searchText.onNext(searchText);
this._selectedIndex.onNext(-1);
}
When it comes to the KeyDown method:
keyDown(event) {
this._eventsStream.onNext(event);
}
Here is the logic behind searching:
const partitionSearchText = this._searchText
.partition((searchText) => !!searchText); //checking if searchText is not empty
partitionSearchText[0]
.subscribe((searchText) => this._suggestions.onNext(
this._allTags.filter((item) => ~item.name.toLowerCase().indexOf(searchText.toLowerCase()))
));
partitionSearchText[1]
.subscribe((searchText) => this._suggestions.onNext([]));
My goal now is to implement events. When there is a searchText and a keyDown event, I want to increment this._selectedIndex, but if this._selectedIndex reaches the length of this._suggestions, then I need it to stop incrementing.
This is what I currently have:
const eventsWithSearchText = this._searchText
.map((searchText) => !!searchText ? this._eventsStream : this.rx.Observable.empty())
.switch()
const keyDownEvents = eventsWithSearchText
.filter((event) => event.keyCode === DOWN_KEY)
keyDownEvents
.subscribe((event) => event.preventDefault())
const isNotLast = this._selectedIndex
.combineLatest(this._suggestions, (index, sugg) => index !== sugg.length - 1);
keyDownEvents
.subscribe((item) => {
this._selectedIndexValue++
this._selectedIndex.onNext(this._selectedIndexValue);
});
Although it increments this._selectedIndex, it does not stop when reaching the same length as this._suggestions.
Any help would be greatly appreciated!