今天在做后台管理系统时，需要用到select组件的远程搜索功能：

element-ui官网上是有相应的远程搜索的功能的：

具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。

官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。

针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。

但是在单选时，就出现了问题：上图中拿到关键字的三种方式中，第三种：鼠标去点击“山东”二字是无法触发remote-method远程搜索方法的。触发不了这个方法，也就无法根据关键字调取相关的数据。上面gif动图中，第一次触发单选框是通过鼠标点击“山东”，此时并没有触发remote-method远程搜索方法，进而无法获取下拉框中的数据。第二次是回车拿到的"山东"二字，此时是可以触发remote-method远程搜索方法的。

经过测试发现：如果通过鼠标点击选择的文字，可以在有光标的同时，直接按回车，此时就会触发远程搜索功能了。

鼠标选中的文案，可以通过回车触发远程搜索功能

如果不希望用这种方式，想要实现：鼠标点击关键字后，直接进行搜索，则需要自行封装：

自行封装的select单选组件

1.html部分的代码

<div style="display:flex;align-items:center;margin-left:-110px;" @click.stop><div class="el-form-label"><span>*</span>供应商名称</div><div class="supplierCls"><el-input size="mini" placeholder="请选择供应商名称" v-model="supplierName" clearable @input="supplierInput" @blur="supplierBlur" @focus="focus" @clear="clearSupplier"></el-input><div class="el-form-content" v-if="supplierOptionsShow"><div v-for="item in supplierOptions" :key="item.id" @click.stop="selectItem(item)" :class="complaintRecordForm.supplierId==item.id?'el-form-selectItem':''">{{item.name}}</div></div></div><div class="tips" v-if="supplierOptionsShowTips">请选择供应商</div>
</div>

select组件的输入功能：通过input组件来实现
select组件的下拉框：通过一个div标签来实现

2.js部分的代码

变量部分

data(){return{supplierName:null, //输入框中的值supplierOptions: [], //下拉框中展示的数据supplierOptionsShow: false, //是否展示下拉框supplierOptionsShowTips:false, //是否展示必填提示信息supplierTimer:null,//防抖的定时器变量}
}

监听输入框的输入事件：input：防抖监听输入内容，调取接口

 supplierInput(val) {clearTimeout(this.supplierTimer);this.supplierTimer = setTimeout(() => {if (val) {this.supplierName = val;this.getSupplierOption(val);} else {this.supplierName = val;this.supplierOptions = [];this.complaintRecordForm.supplierId = null;this.supplierOptionsShow = false;this.supplierOptionsShowTips = true;}}, 200)
},

输入框光标失去焦点时，下拉框内容隐藏，判断是否要提示必填信息

supplierBlur() {if (!this.complaintRecordForm.supplierId) {this.supplierOptionsShowTips = true;this.supplierName = null;} else {this.supplierOptionsShowTips = false;}
},

输入框获取焦点后，根据下拉框是否有数据判断是否要展示下拉框

focus() {if (this.supplierOptions && this.supplierOptions.length) {this.supplierOptionsShow = true;}
},

清空输入框后，要隐藏下拉框，清除下拉框数据等操作

clearSupplier() {this.supplierOptions = [];this.supplierOptionsShow = false;this.supplierBlur();
},

点击下拉框中的某一项内容后，给对应内容赋值，并隐藏下拉框

selectItem(item) {this.supplierName = item.name;this.complaintRecordForm.supplierId = item.id;this.supplierOptionsShow = false;this.supplierBlur();
},

3.css部分代码

.supplierCls {position: relative;width: 180px;
}
.el-form-content {position: absolute;top: 40px;left: 0;width: 100%;border: 1px solid #DCDFE6;border-radius: 6px;z-index: 10;background: #fff;padding: 6px 8px;box-sizing: border-box;max-height: 150px;overflow: auto;
}
.el-form-content > div {cursor:pointer;
}
.el-form-selectItem {color: #f90;font-weight: bold;
}
::-webkit-scrollbar {width: 7px;height: 7px;background-color: transparent;
}
.el-form-label {width: 110px;text-align: right;vertical-align: middle;float: left;font-size: 14px;color: #606266;line-height: 40px;padding: 0 12px 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;font-weight:bold;
}
.el-form-label > span {color:red;margin-right:4px;
}
.tips {position: absolute;top: 25px;font-size: 12px;left: 0;padding: 0;color: red;
}

当然，一个回车就能解决，自己封装一下也可以的。

完成！！！