前端（vue）实现模糊搜索，类似百度搜索_vue 前端查询模糊匹配推荐 el-input-优快云博客

本文介绍了如何使用Vue.js在前端实现模糊搜索功能，类似百度搜索的体验。通过示例代码，展示了具体的实现步骤和关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展示：

代码实现：

<el-form-item label="物资编码：" prop="materialCode">
          <el-input
            @input="autoSearch"
            v-model.trim="newForm.materialCode"
            placeholder="请填写物资编码"
            :disabled="diaTitle == '编辑物资'"
          />
        </el-form-item>
        <ul v-if="showList">
          <p @click="chooseCode(index)" style="height:30px;line-height:30px;margin-left:70px" v-for="(it,index) in this.searchList" :key="index">
            {{it}}
          </p>
          
        </ul>

data() {
    return {
      showList:true,
}
methods: {
// 模糊搜索功能
    autoSearch(eve) {
      console.log(eve);
      this.showList = true  // 选了编码后已经关闭可选内容，如改变搜索条件需要重启showList
      materiaGetType().then(res => {
        if (res.code === 0) {
          this.searchList = res.data;
          this.newSearchList = res.data
        }
      });
      this.autoShow()
    },
    autoShow() {
      var allowPass = true;
      if (!allowPass) {
        return;
      }
      setTimeout(() => {
        allowPass = false;
        console.log('来了没')
        this.searchList = [];
        this.newSearchList.forEach(ele => {
          if(ele.indexOf(this.newForm.materialCode)!== -1){
            console.log('是吗')
            this.searchList.push(ele)
          }
        });
      }, 1000);
    },
chooseCode(ind){
      this.showList = false
      this.newForm.materialCode = this.searchList[ind]
    },
}