const Observable = Rx.Observable
const input = document.querySelector('input')
const search$ = Observable.fromEvent(input, 'input')
.map(e => e.target.value)
.filter(value => value.length >= 1)
// .throttleTime(200) // 节流事件，指的是该事件最多每几秒触发一次
.debounceTime(200) //去抖动时间，指的是必须等待的时间
.distinctUntilChanged()// 当我们观察的数据状态发生改变的时候才会释放数据
.switchMap(term => Observable.fromPromise(wikiIt(term)))
.subscribe(
x => render(x),
err => console.error(err)
)
function render(result) {
document.querySelector('#result').innerHTML = result[1]
.map(r => `<li>${r}</li>`)
.join('')
}
function wikiIt(term) {
console.log('request...')
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + encodeURIComponent(term) + '&origin=*';
return $.getJSON(url)
}
RxJS 实现搜索功能的小例子
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
