【模糊搜索功能】前端vue结合elementul实现模糊搜索功能，简单实现【详细注释】

效果图

代码

完整的代码，样式我也自己调好了。直接复制进去你的编辑器就可以试试了，前提你引入了elementul，如果看的还不够清晰的可以往下翻看解释

<template>
  <div>
    <el-card style="height:800px">
      <div>
        <el-popover placement="bottom-end" width="280" trigger="focus">
          <div v-for="(item, index) in searchResult" :key="index" class="result" @click="choose(item)">
            {{ item }}
          </div>
          <el-input
          clearable 
            v-model="input"
            placeholder="请输入内容"
            style="width: 300px"
            slot="reference"
          ></el-input>
        </el-popover>
        <el-button type="primary" style="margin-left:10px">查询</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //比如这是先后台拿到数据
      info: ["苹果", "香蕉", "平安果", "猕猴桃", "桃子","荔枝","椰子","鸭梨","桂圆","哈密瓜","西瓜","圣女果"],
      //用户输入的值
      input: "",
    };
  },
  computed: {
    //2,计算属性做出遍历计算输入的值匹配的数据
    searchResult() {
      //定义一个空数组从来接收搜索出来的数据
      var list = [];
      //提前存this指向
      var _this = this;
      //判断用户是否输入，没有输入不显示数据
      if (this.input != "") {
        //把后台的数据map循环遍历
        this.info.map(function (item) {
          //判断每一项是否匹配输入的值，如果大于-1代表有匹配到，那就向数组内push进去，然后再次循环，直到不大于-1也就是找不到匹配的了就结束循环走下一步
          if (item.toLowerCase().indexOf(_this.input) > -1) {
            return list.push(item);
          }
        });
      }
      //下一步就是返回搜索结果的list数组。因为上面html用了v-for循环这个计算方法，所以可以直接拿到返回的数组循环出来，达到输入什么值同时出现对应的提示信息
      return list;
    },
  },
  methods:{
      //把点击的数据赋值到输入框内，这样就可以直接点旁边的查询了
      choose(item){
          this.input=item
      }
  }
};
</script>

<style scoped>
/* 选项的大小设定 */
.result{
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-radius: 5px;
}
/* 鼠标经过选项的时候改变背景色，并把鼠标变成小手 */
.result:hover{
    background-color: #f5f7fa;
    cursor: pointer;
}
</style>

解释一下流程：很简单的三步逻辑

1，拿到了一组后端传过来的数据保存到变量 info 了。
2，写一个计算属性，因为计算属性可以实时计算并返回结果。可以当变量一样来使用。然后我们再计算方法内把 info 用map方法循环遍历，利用indexOf方法查看用户输入的值和 info 内某一条是匹配，匹配的就都push进一个新的数组内，然后把新的数组返回出去。
3，v-for循环这个计算属性。因为计算属性的特性就是可以实时计算，所以你输入的时候他就会自动计算一遍查找出你搜索的值对应的数据添加到新数组内返回出来，然后就被渲染出来了，达到了你搜一个字就会出来对应的数据选项的功能。

toLowerCase()：这个方法是全部转成小写的意思，如果你是有因为的选项可以考虑添加，免得区分大小写找不出来，如果你需要区分大小写就删除这个。