带有 rxjs 的 vanilla js：自动完成搜索

Question

我正在尝试将 rxjs 与 vanillajs 结合使用来实现自动完成功能。

我创建了一个 index.html 页面，其中包含输入文本和 index.js 来处理 “keyup” 事件并向服务器发送请求。因为这只是一个演示，我使用了一个 json-server 库来模拟 API 。

我想要的是当用户输入字符时，服务器发送API仅当字符与之前的请求不相同时才发送请求

比如他放：“ev”一个请求被发送，那么他就删除“v” 然后再次表示“v”服务器没有向再次服务器，因为它已发送给“Ev”。

为此，我使用了 distinctUntilChanged()，就像下面的代码一样，但它不起作用（API 工作正常）。

import { debounceTime, map, distinctUntilChanged } from "rxjs/operators";
import { fromEvent } from "rxjs";
const url = "http://localhost:3000/clubs?q=";
let inputTxt = document.getElementById("text-input");
let textChange$ = fromEvent(inputTxt, "keyup");
let autoSuggest$ = textChange$.pipe(
  debounceTime(1000),
  distinctUntilChanged((prev, curr) => prev.target.value == curr.target.value),

  map((e) => fetch(url + e.target.value).then((response) => response.json()))
);

这是 HTML

<body>
    <input
      type="text"
      class="form-control"
      placeholder="Search"
      id="text-input"
    />

    <script src="./index.js"></script>
  </body>

Answer 1

这不是比较前一个状态中的 target 元素，只是比较前一个事件对象。 target 仍然是对同一元素的引用，因此值始终相同：

distinctUntilChanged((prev, curr) => prev.target.value == curr.target.value),

相反，您可以使用 map 来存储比较前的值：

let inputTxt = document.getElementById("text-input");
let textChange$ = fromEvent(inputTxt, "keyup");

let autoSuggest$ = textChange$
  .pipe(
    map(e => e.target.value), // Extract value here
    debounceTime(1000),
    distinctUntilChanged(),
    mergeMap(value => fetch(url + value).then((response) => response.json()))
  )

带有 rxjs 的 vanilla js：自动完成搜索

vanilla js with rxjs : autocomplete search

javascript

rxjs

autocomplete

observable