输入框联想

autoComplete.js 输入框自动补全

• npm安装

npm i @tarekraafat/autocomplete.js

• CDN 安装

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>

• 使用

<div class="autoComplete_wrapper">
  <input id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
</div>

<script>
const autoCompleteJS = new autoComplete({
    placeHolder: "请输入水果名称……",
    data: {
      src: ["苹果-apple", "香蕉-balana", "橙子-orange"],
      cache: true,
    },
    resultItem: {
      highlight: true
    },
    events: {
      input: {
        selection: (event) =>{
          const selection = event.detail.selection.value;
          autoCompleteJS.input.value = selection;
        }
      }
    }
  });
  </script>

• 效果