【前端】下拉框搜索并按照当前搜索词进行排序

【前端】下拉框搜索并按照当前搜索词进行排序

<template>
  <div>
    <el-select
        :filter-method="搜索排序"
        @visible-change="visibleChange"
        v-model="value" filterable placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.val"
          :label="item.val"
          :value="item.val">
      </el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      options: [
          {val: 'ri_year'}, 
          {val: 'soa_year_years'}, 
          {val: 'soa_year'},
          {val: 'year'}, 
          {val: 'years'},
          {val: 'refund_amdfsad'},
          {val: 'dfshrtr'},
          {val: 'rtyythg'},
      ],
      optionsBak:[],
      value: ''
    }
  },
  mounted() {
    //将原始的下拉数据做个备份
    this.optionsBak = this.options
  },
  methods:{
    /**
     * 下拉框出现/隐藏时触发
     * @param flag
     */
    visibleChange(flag){
      console.log(flag)
      if(flag === false){
        //恢复原始的下拉列表数据
        this.options = this.optionsBak
      }
    },
    搜索排序(当前搜索词){
      console.info(当前搜索词)
      if(!当前搜索词){
        //恢复原始的下拉列表
        this.options = this.optionsBak
        return ;
      }
      //最终结果
      let result = []
      //1找到包含当前搜索词的下拉数据
      this.options.forEach((item)=>{
        if(item.label.includes(当前搜索词)){
          result.push(item)
        }
      })
      function 匹配度(val, 当前搜索词){
        if(val == 当前搜索词){
          return -1;
        }
        //优先展示 搜索词靠前的
        return val.indexOf(当前搜索词);
      }
      //2按照val优先排序
      //定义一个比较函数
      function compare(v1,v2){
        let v1匹配度 = 匹配度(v1.val, 当前搜索词);
        let v2匹配度 = 匹配度(v2.val, 当前搜索词);
        if(v1匹配度<v2匹配度){
          //V1在V2之前
          return -1;
        } else if(v1匹配度>v2匹配度){
          return 1;
        } else{
          return 0
        }
      }
      //进行排序
      result.sort(compare)
      //将排序后的下拉数据赋值给下拉框
      this.options = result
    },
  }

}
</script>