本文介绍如何在Vue项目中利用Element UI的el-autocomplete组件实现远程搜索与数据自动填充。通过自定义fetch-suggestions处理mock数据，结合JSON.stringify替换value字段，解决组件仅识别value的问题，并演示选中后自动补全姓名、生日等关联信息的具体实现步骤。
el-autocomplete远程搜索与自动填充实现
首先参考官方提供的示例代码。
在Element UI的Input组件中，可以找到支持远程搜索的功能，用于获取服务端返回的数据。
官方示例中的列表数据通常直接写在loadAll()函数中，若需使用模拟数据，则需对代码进行相应调整。
获取模拟数据的部分。
本例旨在获取远程模拟数据中所有学生的学号信息，根据用户输入的内容进行远程查找。当用户选中目标学号后，系统应自动填充对应的姓名、生日、手机号等信息，从而提升信息获取效率，避免手动逐项输入。
在模板部分添加el-autocomplete组件。
<el-autocomplete
placeholder="请输入studentID"
v-model="form.studentID"
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
>
</el-autocomplete>在脚本部分添加相关处理函数。
//queryString 为在框中输入的值
//cb 回调函数，将处理好的数据推回
querySearchAsync(queryString, cb) {
var studentBasic = this.studentBasic;
console.log(studentBasic)
var results = queryString ? studentBasic.filter(this.createStateFilter(queryString)) : studentBasic;
console.log('results '+results)
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 0.5*1000);
},
//根据输入的字段进行筛选
createStateFilter(queryString) {
return (state) => {
return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//将其他数据自动补全，采用覆盖的方法
handleSelect(item){
this.form.name = item.name;
this.form.studentID = item.value;
this.form.birth = item.birthday;
this.form.region = item.city;
this.form.phone = item.phone;
}实现选中目标学号后，自动补全其他模拟数据的功能。
-
注意事项：关于value字段的处理。
许多网络示例指出，后台返回的数据对象必须包含value关键字，因为autocomplete组件默认只识别value字段。这里提供一个实现技巧：
this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));JSON.stringify() 方法可将JavaScript值（对象或数组）转换为JSON字符串。若指定replacer为函数，可替换值；若为数组，则仅包含指定属性。利用此方法，可将自定义属性统一替换为value字段，从而适配组件要求。
总结。
以上介绍了Vue中el-autocomplete远程搜索下拉框及自动填充功能的实现方法，希望能对大家有所帮助。如有疑问，欢迎留言，小编会及时回复。感谢对本站的支持！若本文对您有帮助，欢迎转载，请注明出处，谢谢！