实现效果，选择数据后，可将其他数据也带出来并在页面上显示
input实现搜索下拉框
<el-form-item label="账户名" :label-width="formLabelWidth"><el-autocompletev-model="formTwo.accountName"//输入框所选中的数据:fetch-suggestions="querySearchAsync1"//下面方法:trigger-on-focus="false"//输入后匹配（执行下面方法）placeholder="必填"@select="handleSelect1"//选中事件></el-autocomplete></el-form-item>
querySearchAsync1(queryString, cb) {//1、输入框输入的内容，2、cb是自带的固定的一个封装函数let queryTLUserRecordByAccountNameData = {//请求接口所需的参数listNum: this.clickListNum,accountName: this.formTwo.accountName,}this.$api.transListInfo_queryTLUserRecordByAccountName(queryTLUserRecordByAccountNameData).then(res => {//请求数据后对数据进行处理var restaurants1 = res.result_info;if(res.result_info.length>0) {//遍历数据，所得的数据中需要将想要显示的数据的属性改为value（element只认value这个属性）restaurants1.forEach(item => {item.value = item.accountName;})}//将数据过滤，取出所输入数据与查询数据匹配的所有数据var results = restaurants1.filter(item => {return item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;});cb(results);//利用此方法将数据展示出来})},handleSelect1(val) {//选中事件，可选中该数据，并将其他数据也带出来显示在页面上this.formTwo.accountName = val.value;this.formTwo.accountNum = val.accountNum;}
自定义输入建议的显示
<el-autocompletev-elsev-model="query.subjectName":fetch-suggestions="querySearch"placeholder="请输入收款项目"popper-class="my-autocomplete"@select="handleSelect"><template slot-scope="{ item }"><p class="name">{{ item.paySubName }}</p></template></el-autocomplete>
//下拉框搜索querySearch(queryString, cb) {var payeeData = this.payeeData;//所有数据var results = queryString ? payeeData.filter(this.createFilter(queryString)) : payeeData;cb(results); },createFilter(queryString) {return (restaurant) => {//payname是查询的数据return (restaurant.paySubName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},handleSelect(item) {//选择事件this.query.subjectName = item.paySubName;},//获取所有收款项目selectWithSecond() {selectWithSecond().then((res) => {this.payeeData = res.data;});},
select实现搜索下拉框
<el-selectv-model="value"//已选中的数据filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod"//下面方法@select="change"//选中事件:loading="loading"><el-optionv-for="item in options"//数据:key="item.value":label="item.label"//展示的数据:value="item">//所需的所有数据</el-option></el-select>
data() {return {options: [],//下拉框中数据value: [],//已选中的数据loading: false,}},methods: {remoteMethod(query) {//所输入的数据let queryTLUserRecordByAccountNameData = {//请求接口所需的参数listNum: this.clickListNum,accountName: this.formTwo.accountName,}this.$api.transListInfo_queryTLUserRecordByAccountName(queryTLUserRecordByAccountNameData).then(res => {this.options = res.result_info})},change(val) {//选中事件，可选中该数据，并将其他数据也带出来显示在页面上this.formTwo.accountName = val.value;this.formTwo.accountNum = val.accountNum;}}
element-ui中远程搜素 input实现搜索下拉框（可保留输入内容） 或select实现搜索下拉框（不可保留输入内容）
