前端实现输入框实时搜索，【vue+el-input】-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端实现输入框实时搜索，【vue+el-input】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一般搜索都是调后端的接口，绑searchValue字段（也有可能叫其他的字段名），通过后端的接口进行实时搜索

如果由前端自己实现搜索过滤的话也简单

1、input事件

 <el-input
          v-model="queryParams.searchValue"
          @input="keywordChange($event)"       
          clearable
          style="width: 180px"      
        />

2、绑数据源的时候，根据条件判断用过滤数组还是原数组

  <el-table
          ref="elTable"
          class="mblclass"
          border
          :data="filterList.length?filterList:datalist"   
          style="font-size: 14px"
        >

3、data中定义数据

 data() {
    return {
      datalist: [],//原数组
      filterList:[],//过滤数组

}}

4、先获取原数组的数据

  async getdata() {
      {
        try {
          const res = await getlistdata()
          this.datalist = res.data.list
          this.total = Number(res.data.totalRow)         
        } catch (error) {
        }
      }
    },

5、输入框input事件文章来源地址https://www.toymoban.com/news/detail-697434.html

    //关键字搜索
    keywordChange(keywords) {
      this.filterList = this.seachArray(this.datalist, keywords)
      this.total = this.filterList.length
    },
    
        seachArray(arr, keyword) {
      const newArr = arr.filter(item => {
      //toUpperCase()将输入内容与对应的字段都转换为大写，这样可以实现不区分大小写，都能搜索到
        return item.code.toUpperCase().includes(keyword.toUpperCase()) ||      item.name.toUpperCase().includes(keyword.toUpperCase())
      })
      return newArr
    },