文本框输入实现自动完成功能autocomplete

最新推荐文章于 2023-08-14 20:37:21 发布

阿赛工作室

最新推荐文章于 2023-08-14 20:37:21 发布

阅读量880

点赞数

本文链接：https://blog.csdn.net/qq_25753445/article/details/122878055

版权

javascript 同时被 3 个专栏收录

55 篇文章 2 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本框输入实现自动完成功能autocomplete</title>
    <style>
      #divInput {
        margin: 20px auto;
        padding: 20px;
        width: 280px;
        background-color: bisque;
      }
      #divInput ul,
      #divInput li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      #autoInput {
        width: 240px;
        padding: 0 20px;
        margin: 0;
        border: 0;
        height: 36px;
        line-height: 36px;
      }
      #popInput {
        position: relative;
      }
      #uiInput {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-top: #d8d8d8 1px solid;
        border-left: #d8d8d8 1px solid;
        border-right: #d8d8d8 1px solid;
      }
      #uiInput li {
        padding-left: 20px;
        border-bottom: #d8d8d8 1px solid;
        line-height: 28px;
        background-color: #f5f5f5;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="divInput">
      <input
        type="text"
        placeholder="请输入英文、数字测试自动完成"
        id="autoInput"
      />
      <div id="popInput">
        <ul id="uiInput"></ul>
      </div>
    </div>
    <script>
      var arr = [
        "123",
        "234",
        "456a",
        "123345",
        "aaaaa",
        "bbbb",
        "88888",
        "asai",
        "asai.cc",
        "www.asai.cc",
      ];
      var inputDom = document.getElementById("autoInput");
      var popDom = document.getElementById("uiInput");
      function listenInput(e) {
        var _val = e.target.value.trim();
        var _lis = [];
        if (_val) {
          arr.forEach((str) => {
            // if (str.startsWith(_val)) { // 匹配开头
            if (str.indexOf(_val) !== -1) {
              // 匹配所有
              _lis.push(
                "<li>" +
                  str.replace(_val, "<font color=red>" + _val + "</font>") +
                  "</li>"
              );
            }
          });
        }
        popDom.innerHTML = _lis.join("");
      }
      function listenClick(e) {
        if (e.target.tagName.toLowerCase() === "li") {
          var _val = e.target.innerText;
          inputDom.value = _val;
        }
      }
      inputDom.addEventListener("input", listenInput, false);
      popDom.addEventListener("click", listenClick, false);
      window.addEventListener("beforeunload", function (e) {
        inputDom.removeEventListener("input", listenInput, false);
        popDom.removeEventListener("click", listenClick, false);
      });
    </script>
  </body>
</html>

阿赛工作室

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
文本框输入实现自动完成功能autocomplete

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l...
复制链接

扫一扫