RxJS 实例教程：动态搜索用户输入-JavaScript中文网-JavaScript教程资源分享门户

RxJS (Reactive Extensions for JavaScript) 是一个强大的响应式编程库，可以提高 JavaScript 应用程序的表现和可维护性。本文将介绍如何使用 RxJS 实现动态搜索用户输入功能。

什么是动态搜索用户输入？

动态搜索用户输入，即实现一个搜索框，在用户输入过程中实时查询匹配的结果。例如，当用户在搜索框中输入 "r" 时，就应该实时显示以 "r" 开头的匹配结果，而且还能随着用户的输入实时更新。

实现过程

我们将通过一个示例来展示如何使用 RxJS 实现动态搜索用户输入功能。

HTML 结构

首先，我们需要在 HTML 中创建一个搜索框和一个显示搜索结果的容器：

<input type="text" id="searchField">
<div id="searchResults"></div>

引入 RxJS

然后，我们需要在 JavaScript 中引入 RxJS。我们可以使用 CDN：

<script src="https://cdn.jsdelivr.net/npm/rxjs"></script>

或者通过 NPM 安装：

npm install rxjs

然后，在 JavaScript 文件中引入 RxJS：

import { fromEvent } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

我们将使用 RxJS 的 fromEvent、map、debounceTime、distinctUntilChanged 和 switchMap 运算符实现动态搜索用户输入功能。

监听搜索框输入事件

接下来，我们需要监听输入框的 "input" 事件，即当用户在搜索框中输入时，我们要实时获取用户输入的值：

const searchField = document.getElementById('searchField');

const searchEvent$ = fromEvent(searchField, 'input');

searchEvent$ 是一个可观察对象，每当用户在搜索框中输入时，它就会发出一个包含输入框的值的事件对象。

转换用户输入的值

由于 RxJS 的运算符可以链式调用，我们可以使用 map 运算符来获取用户输入的值，然后把它转换成我们想要的格式。在本例中，我们将把用户输入的值转换成小写：

const searchValue$ = searchEvent$.pipe(
  map(event => event.target.value.toLowerCase())
);

searchValue$ 是一个可观察对象，每当用户在搜索框中输入时，它就会发出一个包含转换后的搜索值的事件对象。

防抖动和去重

接下来，我们可以使用 debounceTime 运算符来添加一个防抖动的时间窗口，这样当用户在搜索框中输入时，我们不会立即执行检索操作，而是等待一个指定的时间窗口（例如 300 毫秒），以便用户有足够的时间在输入框中输入内容。

const searchValue$ = searchEvent$.pipe(
  map(event => event.target.value.toLowerCase()),
  debounceTime(300)
);

我们还可以使用 distinctUntilChanged 运算符来去重，防止重复查询。例如，当用户在搜索框中快速输入 "rxjs" 和 "rx" 时，我们只需要查询一次 "rxjs"，另一个 "rx" 的查询就可以忽略。

const searchValue$ = searchEvent$.pipe(
  map(event => event.target.value.toLowerCase()),
  debounceTime(300),
  distinctUntilChanged()
);

查询匹配的结果

最后，我们可以使用 switchMap 运算符来执行实际的查询操作。switchMap 运算符可以同时取消先前的请求，并在新的请求到来后立即执行新的请求。

const searchUrl = 'https://jsonplaceholder.typicode.com/users';

const searchResult$ = searchValue$.pipe(
  switchMap(searchValue => {
    return fetch(`${searchUrl}?name_like=${encodeURIComponent(searchValue)}`)
      .then(response => response.json());
  })
);

searchResult$ 是一个可观察对象，在每次用户在搜索框中输入时，它就会发出一个包含查询结果的事件对象。在查询 URL 中，我们使用 "name_like" 参数来进行模糊匹配，以便获取与用户输入匹配的结果。

显示查询结果

我们可以通过订阅 searchResult$ 来获取每次查询结果，并将其显示在搜索结果容器中：

// javascriptcn.com 代码示例
const searchResults = document.getElementById('searchResults');

searchResult$.subscribe(results => {
  searchResults.innerHTML = '';
  results.forEach(user => {
    const name = user.name;
    const email = user.email;
    const div = document.createElement('div');
    div.innerHTML = `<strong>${name}</strong> (${email})`;
    searchResults.appendChild(div);
  });
});

我们每次获取到查询结果时，都清空搜索结果容器并将查询结果逐个添加到容器中。这里我们只显示了每个用户的名称和电子邮件地址。

总结

本文介绍了如何使用 RxJS 实现动态搜索用户输入功能。我们先监听输入框的 "input" 事件，并使用 RxJS 运算符转换用户输入的值，防抖动和去重，并通过 switchMap 运算符查询与用户输入匹配的结果。最后，我们把查询结果显示在搜索结果容器中。

RxJS 提供了强大的编程模式和运算符，可以提高 JavaScript 应用程序的表现和可维护性。动态搜索用户输入功能只是 RxJS 所支持的功能的冰山一角。我们希望本文能为初学者提供一些指导，并鼓励更多的人使用 RxJS。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654457ed7d4982a6ebe388ba