vue手动实现输入框模糊查询

主要方法

数组过滤方法：filter

主要思路

1. 在输入内容的同时，显示下拉候选项，并获取点击项的值，赋值给输入框。
2. 候选项的显示与隐藏：
   1. 输入框的值改变时显示
   2. 点击候选项后隐藏
   3. 点击候选项之外的地方隐藏候选项

效果

完整代码

<template>
  <div>
    <input
      type="text"
      class="inp"
      @input="getWord"
      v-model="inputVal"
    />
    <div class="words" v-show="isShow">
      <div
        class="item"
        v-for="(item, index) in words"
        :key="index"
        @click="getItem($event)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      inputVal: "",
      isShow: false,
      words: [],
      //候选词。可以和后端交互，由后端返回
      list: [
        "熬清守谈",
        "熬清守淡",
        "熬清受淡",
        "冰清玉粹",
        "冰清水冷",
        "冰洁清",
        "冰洁玉清",
        "闭壁清野",
        "观者清",
        "冰清玉润",
        "冰清玉洁",
        "蜂绝风清",
        "缠夹不清",
        "词清讼简",
        "欢鲜清",
        "维风清声",
        "推陷廊清",
        "澄清天下",
        "激底澄清",
        "才高气清",
        "杜清源",
        "冬温夏清",
        "戴清履浊",
        "独清独醒",
        " 当局者迷，观者清",
        "耳根清净",
      ],
    };
  },
  mounted() {
    // 候选词框外点击，隐藏候选框
    document.addEventListener("click", (e) => {
      if (e.target.className !== "words") {
        this.isShow = false;
      }
    });
  },
  methods: {
    // 数组模糊过滤
    getWord() {
      this.words = this.list.filter((item) => {
        return item.includes(this.inputVal);
      });
      if (this.words.length) {
        this.isShow = true;
      }
    },
    // 选中当前
    getItem(e) {
      this.inputVal = e.target.innerText;
      this.isShow = false;
    },
  },
};

.inp {
  width: 150px;
  height: 18px;
  outline: none;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  padding: 3px;
}
.words {
  width: 150px;
  height: 150px;
  overflow-y: scroll;
  box-shadow: 1px 1px 10px 0.5px #d0d0d0;
}
.item {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding: 3px 5px;
}
.item:hover {
  background-color: rgb(245, 214, 218);
}