RxJS 实现搜索框自动补全

前言

搜索框是我们在开发网站或者Web应用的过程中常常需要实现的功能。搜索框自动补全是其中一个常见的需求，我们可以通过介绍RxJS的操作符来实现这个功能。RxJS是什么？它是什么原理？在本文中，我将为你解答这些问题，并且以实例代码的形式讲解如何使用RxJS实现搜索框自动补全。

RxJS是什么？

RxJS是ReactiveX编程框架的JavaScript实现，包含了Observables（可观察对象）的实现，并提供了用于处理Observables的操作符。RxJS的核心思想是响应式编程，通过在一个异步数据流中建立构造函数的方式来处理数据。运用RxJS的操作符，我们可以获取、变换和处理Observables中所传输的数据。观察者会在数据流中订阅该事件，然后响应这些Event。RxJS也提供了 Subject， BehaviorSubject 等常用的操作符，使得在数据流中一些重要的事件能够随时提供数据，以及订阅事件。

RxJS的工作原理

RxJS的工作原理基于响应式编程。在RxJS中，我们有以下这些步骤：

1. Observable：使用Observable构建一个异步数据流。
2. Operators：通过使用Operators来转换Observable中发送的数据流。
3. Observer：使用Observer观察数据流。
4. Subscription：Subscription是从Observable返回的一个 Subscription，以便取消对数据流的订阅。
5. Subject：它是一种特殊类型的可观察对象，它是Observable的一种变体。它同时充当观察者和可观察者。
6. BehaviorSubject：它被认为是一种变体，因为它需要一个初始值，并且可以设置或更改该初始值。

如何使用RxJS实现搜索框自动补全

Delta标准的搜索框自动补全分为两部分：数据请求和UI展示。下面是Delta标准的的实现逻辑：

1. 用户在输入框中输入内容；
2. 当用户输入内容变化时，Delta标准请求后端返回一个搜索建议列表；
3. Delta标准将建议列表在UI上进行展示；
4. 用户选择建议选项后，Delta标准将在输入框中呈现对应值。

使用RxJS的实现可以有效缩短代码量，并且方便扩展。

首先我们要用RxJS来监听输入框内容的变化：

const searchBox = document.querySelector('#search-box');
const searchBoxInput = Rx.Observable.fromEvent(searchBox, 'input').pluck('target', 'value');

使用pluck() 操作符取出target.value，这里是RxJS的快捷方式，等同于 map(e => e.target.value)。那么这里的searchBoxInput 就是监听searchBox输入框的数据流了。

接着我们就可以开始使用RxJS的Operator操作符，将搜索建议列表交给我们来实现。我们使用flatMapLatest或者switchLatest操作符从输入框中获取的值创建一个新的Observable，并且从服务器接收一个搜索建议列表。这就是RxJS的核心概念——无限链式调用。

const API_KEY = 'YOUR_API_KEY';
const API_URL = `https://your.api.url/suggestions?key=${API_KEY}&query=`;

const suggestions = searchBoxInput
  .flatMapLatest((query) => {
    return Rx.Observable.fromPromise(fetch(API_URL + query).then(res => res.json()));
  });

接着我们就剩下了UI展示的部分了，我们需要将搜索建议列表呈现在UI上。

-- -------------------- ---- -------
----- -------------- - -------------------------------------------
----- -------------------------- - -------------------------------------------------------------------

-------------------------------------- -- -
  ------------------------ - ---
  ----------------------------- -- -
    ----- ---------- - ---------------------------------------------------- ------------
    ---------------------------------------------- ------------
  --
--

这里我们订阅了搜索建议列表，清空了建议列表的HTML内容并且使用了模板和innerHTML属性替换HTML代码。

LiveData和RxJava使用起来很简单，我们只需在onCreate()方法里建立流，并且用Drawable对象。RxJS也是一样，只需通过Observable操作符建立对应DataStream，然后使用Subscription订阅，让searchBox和suggestions都保持在InitialStates并相应变化。最后发现RxJS的实现既有安卓原生组件的便利性，又有其强大的管道式操作，是值得开发者们学习利用的。

总结

在本文中，我们了解了RxJS的基本知识，并且以搜索框自动补全为例，讲解了如何使用RxJS操作符实现自动补全。与其他RxJS的操作符一样，复合操作符的组合可以让你进一步把Observables组合成管道式流。这样在日常使用中，你就可以写出更少的重复代码，而实现更快和更高效的代码。我们也希望这篇文章对于初学者能够引导他们进入RxJS的世界，并不断提高自己的响应式编程技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64521901675af4061b5c481f