amp;</bdi>")}</li>`); } return res; }, []); return search; } const data = [ "上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心", ]; const container = document.querySelector(".container"); const memorizeInput = memorize(handleInput); document.querySelector(".inp").addEventListener( "input", debounce((e) => { memorizeInput(e.target.value); }) ); </script> </html>">模糊搜索关键词高亮显示 | XXXWeiiamp;</bdi>")}</li>`); } return res; }, []); return search; } const data = [ "上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心", ]; const container = document.querySelector(".container"); const memorizeInput = memorize(handleInput); document.querySelector(".inp").addEventListener( "input", debounce((e) => { memorizeInput(e.target.value); }) ); </script> </html>">
跳至主要內容

模糊搜索关键词高亮显示

XXXWeii其他其他小于 1 分钟约 235 字...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>auto complete</title>
    <style>
      bdi {
        color: rgb(0, 136, 255);
      }

      li {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <input class="inp" type="text" />
    <section>
      <ul class="container"></ul>
    </section>
  </body>
  <script>
    function debounce(fn, timeout = 300) {
      let t;
      return (...args) => {
        if (t) {
          clearTimeout(t);
        }
        t = setTimeout(() => {
          fn.apply(fn, args);
        }, timeout);
      };
    }

    function memorize(fn) {
      const cache = new Map();
      return (name) => {
        if (!name) {
          container.innerHTML = "";
          return;
        }
        if (cache.get(name)) {
          container.innerHTML = cache.get(name);
          return;
        }
        const res = fn.call(fn, name).join("");
        cache.set(name, res);
        container.innerHTML = res;
      };
    }

    function handleInput(value) {
      const reg = new RegExp(`\(${value}\)`);
      const search = data.reduce((res, cur) => {
        if (reg.test(cur)) {
          const match = RegExp.$1;
          res.push(`<li>${cur.replace(match, "<bdi>$&</bdi>")}</li>`);
        }
        return res;
      }, []);
      return search;
    }

    const data = [
      "上海野生动物园",
      "上饶野生动物园",
      "北京巷子",
      "上海中心",
      "上海黄埔江",
      "迪士尼上海",
      "陆家嘴上海中心",
    ];
    const container = document.querySelector(".container");
    const memorizeInput = memorize(handleInput);
    document.querySelector(".inp").addEventListener(
      "input",
      debounce((e) => {
        memorizeInput(e.target.value);
      })
    );
  </script>
</html>
0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.5