解决ElementUI Select组件中文状态下输入英文取得值后无法触发搜索的问题

在做elementUI Select搜索功能时，输入中文按shift后无法触发自动搜索，玛德，改了我一小时二十三分钟二十八秒，差点原地爆炸，终于在网上发现了两个没怎么用过的事件：compositionstart 和 compositionend

Excuse me？！瞬间通透：

- compositionstart：在输入中文或者语音等需要等待一连串的输入的操作之前，compositionstart 事件会触发
- compositionend：在输入中文或者语音等完毕或取消时，compositionend 事件会触发，compositionend 在 input 事件之后触发 

template

<el-select v-model="keywords" ref="type" filterable :filter-method="dataFilter" :popper-append-to-body=false placeholder="请选择">
	<el-option-group>
		<el-option
		v-for="item in listFilter"
		:key="item"
		:label="item"
		:value="item">
		</el-option>
	</el-option-group>
</el-select>

data

data() {
	return {
		keywords: "",
		list: [], // 原数据 - 一维数组
		listFilter: [] // 过滤之后的数据，用来在下拉框中显示 - 临时数组
	}
}

methods

// 获取下拉框列表
getData(){
	this.$ajax.getList().then((response) => { // 这个是我自己封装的axios方法，不用管，目的拿到数据就行
		this.list = response.result;
		this.listFilter = this.searchTypeLists; // 拿到数据并还原数组，避免不搜索时不显示下拉内容
	}).catch(function (err) {
		console.log(err);
	});
}

// 过滤
dataFilter(val) {
	if (val) { // val存在
		this.listFilter = this.list.filter((item) => {
			if (!!~item.indexOf(val) || !!~item.toUpperCase().indexOf(val.toUpperCase())) {
				return true
			}
		})
	} else { // val为空时，还原数组
		this.listFilter = this.list;
	}
}

mounted

let self = this;
var isInputZh = false;
var typeEle = self.$refs.type.$el.children[0].children[0];

typeEle.addEventListener('compositionstart', function (e) {
	isInputZh = true;
}, false);

typeEle.addEventListener('compositionend', function (e) {
	isInputZh = false;
	self.dataFilter(typeEle.value);
}, false);

typeEle.addEventListener('input', function (e) {
	if (isInputZh) return;
	var value = this.value;
	self.dataFilter(value);
}, false);

总结以下几点，方便下次直接开车：

1、ref="type" - 获取DOM，拿到input的value
2、filterable - 开启select的搜索功能
3、:filter-method="dataFilter" - 自定义搜索方法
4、监听 input、compositionend 触发自定义搜索方法