vue element中input远程搜索autocomplete的使用

vue element中input远程搜索autocomplete的使用

1. 效果
   

2. 代码

<el-autocomplete
								style="width:100%"
								value-key="templateCode"
								clearable
								@clear="setBlur"
								v-model.trim="add.smsCode"
								:fetch-suggestions="autoPush"
								placeholder="111"
								:trigger-on-focus="false"
								@select="handleSelect"
								@change="changeSelect"
							></el-autocomplete>

3. 方法

async autoPush(str, cb) {
			if (this.add.smsCode.length < 5) {
				return;
			}
			const params = {
				keywords: this.add.smsCode,
				type: 'NOTIFY',
				status: 'PASSED',
			};
			const res = await smsTemplate.listPaged(params);
			if (res.code === '30000') {
				this.keep = true;
				this.templateList = res.records;
			} else {
				this.templateList = [];
				this.$message.error(res.msg);
				this.keep = false;
				this.add.contentSms = '';
			}
			cb(this.templateList);
		},
setBlur() {
			this.add.smsCode = '';
			this.add.contentSms = '';
		},
handleSelect(item) {
			this.add.contentSms = item.content;
		},
changeSelect(name) {
			if (this.templateList.every(item => item.templateCode !== name)) {
				this.add.smsCode = null;
			}
			if (!this.add.smsCode) this.add.contentSms = '';
		},