复盘预警邮件el-select远程搜索功能，支持中文和大小写

需求：

01：根据在的中输入值，通过远程搜索，模糊查询，找到匹配的值，包括大小写和汉字的搜索；
02：支持创建条目，即下拉列表没有值，也可以支持手动输入；

效果图：

数据结构

options:[
{“um”:“LITAO0938”,“name”:“李涛”},
{“um”:“DUZHENYAO”,“name”:“杜圳尧”},
{“um”:“WEIWEI202”,“name”:“魏伟”},
{“um”:“ZHANGSAN”,“name”:“张三”},
{“um”:“LISI”,“name”:“李四”},
{“um”:“WEIWEI886”,“name”:“魏书生”},
{“um”:“LITAO231”,“name”:“李涛”},
{“um”:“DUTAO”,“name”:“杜涛”},
{“um”:“DUZHANGYI”,“name”:“杜章义”}
],

设计思路：

01：Vue模板部分：搭建框架，需求是一个表单，为下拉组件el-select。

<el-form :model="form">
	<el-form-item>
	  <el-select 
	    v-model="form.receiver" 
	    placeholder="收件人"
	    :remote-method="remoteEmailUserMethod"
	    filterable
	    remote
	    clearable
	    allow-create
	    class="selectWidth"
	    >
	    <el-option 
	      v-for="item in emailUserOptions"
	      :key="item.um"
	      :label="item.name"
	      :value="item.um"
	    ></el-option>
	  </el-select>
	</el-form-item>
</el-form>

知识碎片：

① clearable：给input框增加去除功能；
② remote-method：远程搜索效果；
③filterable：支持输入（是否可搜索）；
④ remote： 是否为远程搜索；

代码分析：

 :remote-method="remoteEmailUserMethod"
 //这个是指<el-select>在input框中输入值 ，会启动远程搜索功能；

 <el-option 
   v-for="item in emailUserOptions"
   :key="item.um"
   :label="item.name"
   :value="item.um"
 ></el-option>
 //为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.um。

02：JS部分：实现模糊查询。

 methods: {
    remoteEmailUserMethod(query) {
      if(query!=='') {
        this.loading = true;
        let filterEmailUser = JSON.parse(JSON.stringify(this.options));
        filterEmailUser= filterEmailUser.map(item => {
          return ({
            name:`${item.name}<${item.um}@163.com.cn>`,
            um:item.um
          })
        })
        this.emailUserOptions = filterEmailUser.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase())>-1);
        console.log('this.emailUserOptions',this.emailUserOptions);
      }
    },
  }

Q&A 问答清单

Q1：在input框里输入字段后，回车得不到模糊搜索的下拉数据；

解决方案：
01：下拉框里的数据是一开始获取到全部【this.options】，这样的话就永远都是所有数据;
02：所以需要给出一个通过远程搜索获取到的根据输入的值模糊出来的列表数据【this.emailUserOptions】当成下拉列表；
03：当再次输入其他的值，需要过滤的还是从最开始的全部数据中查找，所以需要深拷贝一个相同的原始数据【filterEmailUser】，以防破坏原始数据；

Q2：在input框输入汉字，但是提示没有数据；

知识点：
①：el-select下拉框里面显示的数据是【 emailUserOptions】；
②：【：label】里面显示的是输入框里面的内容；

解决方案：
过滤的所有数据都是从原始的所有数据中来，所以需要对备份的深拷贝数据进行数据结构的改变。
01：原来的结构{um:"LITAO",name:"李涛"}
02：修改结构{um:"李涛<LITAO@163.com.cn>",name:"李涛"}

Q3：在input框输入小写默认不支持；

解决方案：
this.emailUserOptions = filterEmailUser.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase())>-1);

知识碎片：

filter(callback)：数组的一个方法。
方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
callbackFn：用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false
则不保留。

它接受以下三个参数：
element： 数组中当前正在处理的元素。
index： 正在处理的元素在数组中的索引。
array： 调用了 filter() 的数组本身。

//示例:筛选排除所有较小的值
//下例使用 filter() 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

全部代码：

<template>
  <div class="tab-container">
    <el-form :model="form">
      <el-form-item>
        <el-select 
          v-model="form.receiver" 
          placeholder="收件人"
          :remote-method="remoteEmailUserMethod"
          filterable
          remote
          clearable
          allow-create
          class="selectWidth"
          >
          <el-option 
            v-for="item in emailUserOptions"
            :key="item.um"
            :label="item.name"
            :value="item.um"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import TabPane from './components/TabPane'

export default {
  name: 'Tab',
  components: { TabPane },
  data() {
    return {
      form:{
        receiver:'',
      },
      emailUserOptions:[],
      options:[
        {"um":"LITAO0938","name":"李涛"},
        {"um":"DUZHENYAO","name":"杜圳尧"},
        {"um":"WEIWEI202","name":"魏伟"},
        {"um":"ZHANGSAN","name":"张三"},
        {"um":"LISI","name":"李四"},
        {"um":"WEIWEI886","name":"魏书生"},
        {"um":"LITAO231","name":"李涛"},
        {"um":"DUTAO","name":"杜涛"},
        {"um":"DUZHANGYI","name":"杜章义"}
      ],
      loading:false
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    },
    remoteEmailUserMethod(query) {
      if(query!=='') {
        this.loading = true;
        let filterEmailUser = JSON.parse(JSON.stringify(this.options));
        filterEmailUser= filterEmailUser.map(item => {
          return ({
            name:`${item.name}<${item.um}@163.com.cn>`,
            um:item.um
          })
        })
        this.emailUserOptions = filterEmailUser.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase())>-1);
        console.log('this.emailUserOptions',this.emailUserOptions);
      }
    },
  }
}
</script>

链接：
el-select：https://element.eleme.cn/#/zh-CN/component/select
filter(callback) MDN地址：：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter