1. 前言
RxJS 是一个常用的响应式编程框架，可以帮助开发者更轻松地处理异步数据流。在前端开发中，自动补全建议列表是一个非常常见的需求，如：
- 搜索框联想
- 表单自动填充
本文将使用 RxJS 实现自动补全建议列表功能，并对整个过程进行详细讲解，帮助读者掌握 RxJS 在实践中的使用。
2. 功能实现
本文实现的自动补全建议列表功能分为两步：
- 监听输入框输入事件 `input$
- 根据输入值获取建议列表 suggestions$
2.1 监听输入框输入事件
在 HTML 中，我们可以使用 <input> 标签实现文本输入框。为了监听输入事件，我们可以使用 RxJS 提供的 fromEvent 函数将 <input> 元素的输入事件转换成一个名为 input$ 的流：
const inputEl = document.querySelector('input');
const input$ = fromEvent(inputEl, 'input');这里的 fromEvent 函数会将 DOM 对象上的事件转换成一个 Observable，我们可以通过订阅该流来监听输入事件。
2.2 根据输入值获取建议列表
获取建议列表需要与后端进行交互，一般使用网络请求。但为了不影响此次讲解，我们暂时先使用一个假的建议列表服务：
const suggestService = (value) => {
const suggestions = ['apple', 'orange', 'banana', 'pear', 'peach', 'kiwi'];
return of(suggestions.filter(s => s.includes(value))).pipe(delay(1000));
}这个 suggestService 函数接受一个输入字符串参数 value，返回一个 Observable，内部是一个延迟 1s 后的筛选结果。通过 filter 函数，我们可以得到以输入值为前缀的列表。
我们可以通过 switchMap 操作符将 input$ 流和 suggestService 流连接起来，实现自动获取建议列表的功能，并将结果转换成名为 suggestions$ 的流：
const suggestions$ = input$.pipe( debounceTime(300), distinctUntilChanged(), switchMap(event => suggestService(event.target.value)), );
这里的 debounceTime 函数表示防抖，distinctUntilChanged 函数表示去重。这两个函数配合使用，可以起到减少流量和请求的效果，提升性能。switchMap 函数可以将输入值流重新映射到建议列表服务，当新的输入值出现时，会终止上一个请求并发起新的请求，确保获取的建议列表正确。
3. 完整代码
-- -------------------- ---- ------- ------ - ---------- -- - ---- ------- ------ - ------------- --------------------- ---------- ----- - ---- ----------------- ----- ------- - -------------------------------- ----- -------------- - ------- -- - ----- ----------- - --------- --------- --------- ------- -------- -------- ------ ----------------------- -- -------------------------------------- - ----- ------ - ------------------ --------- ----- ------------ - ------------ ------------------ ----------------------- --------------- -- ------------------------------------ -- ---------------------------------- -- - ------------------------- ---
4. 总结
在本文中，我们使用 RxJS 实现了自动补全建议列表功能，并对其中的细节进行了讲解。RxJS 可以帮助我们更好地处理异步数据流，具有优秀的性能和易用性，是前端开发中不可或缺的工具之一。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aa21e48841e98948be32f