rxjs6 自动补全

最新推荐文章于 2024-09-02 23:14:47 发布

阿豪boy

最新推荐文章于 2024-09-02 23:14:47 发布

阅读量57

点赞数

文章标签： python js javascript vue java

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065301

版权

原文链接: rxjs6 自动补全

上一篇: rxjs6 区分单击和双击

下一篇: rxjs6 控制虚线长度

自动补全 / 智能提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./rxjs.umd.js"></script>
  <style>
    .info {
      border: 1px solid deepskyblue;
    }
  </style>
</head>
<body>

<input type="text" id="input">
<div id="list">

</div>
<script>
  const {range, from, fromEvent} = rxjs;
  const {map, filter, retry, debounceTime, switchMap} = rxjs.operators;

  function getSuggest(text) {
    return new Promise((resolve, reject) => {

      setTimeout(() => {

        if (Math.random() < .5) {
          reject('err')
          console.log('reject')
        }

        let list = [...Array(10)].map((_, index) => {
          return 'suggest: ' + index + ' ' + text
        })
        resolve(list)
      }, 1000)
    })
  }

  function render(list = []) {
    let root = document.getElementById('list')
    root.innerHTML = ''
    for (let i of list) {
      let h1 = document.createElement('h3')
      h1.innerText = i
      h1.classList.add('info')
      root.appendChild(h1)
    }
  }

  const input = document.getElementById('input')
  // 每次输入后的文本内容
  const keyword$ = fromEvent(input, 'input').pipe(
    map(e => e.target.value),
    debounceTime(100)
  )

  keyword$.pipe(
    switchMap(x => from(getSuggest(x)).pipe(
    )),
    retry(3)
  ).subscribe(data => {
    console.log('sub', data)
    render(data)
  })

  // 点击建议内容
  const click$ = fromEvent(document, 'click').pipe(
    filter(e => e.target.className === 'info'),
    map(e => e.target.innerText)
  ).subscribe(text => {
    console.log('text', text)
    input.value = text
    render()
  })


</script>
</body>
</html>