element input历史查询(模糊查询)以及防抖处理
在main.js里添加全局-----防抖处理
Vue.prototype.debounce = function(fn, delay) {
//防抖
let timer = null; //声明一个timer
return function () {
if (timer) {
//如果timer有值的话代码已经执行过了。执行了的话是不是要清空
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(null, arguments);
}, delay); //如果没有的话代表还未在规定的时间内执行
};
}
- html
<template>
<div>
<el-autocomplete
v-model="item.tp004"
:fetch-suggestions="inputChange"
placeholder="请输入证件号码"
@select="handleSelect($event, item)"
></el-autocomplete>
</div>
</template>
- js
methods:{
//---------------------------------------------
//防抖处理
inputChange(name, callback) {
this.debounce(this.querySearch(name, callback), 1000)
},
//查询搜索处理
//身份证号码
querySearch(name, callback) {
this.restaurants = [];//重新定义,防止累加
if (name != "" && name.length > 0) {
//获取搜索数据
this.$get(this.api.getIdCard, {
IdCard: name,
})
.then((res) => {
if (res.data == undefined) {
callback([
{
id: "暂无数据",
value: "暂无数据",
},
]);
} else {
res.data.forEach((item) => {
this.restaurants.push({
id: item.tp001,
value: item.tp004,
});
});
// 调用 callback 返回建议列表的数据,是一个数组类型
callback(this.restaurants);
}
})
.catch((err) => {
console.log(err);
});
}
},
handleSelect(e, item) {
//根据选中的身份证号所属的id,查出这个人所有身份信息,回显
this.$get(this.api.getPersonInfo, {
tp001: e.id,
})
.then((res) => {
if (res.data.tp001) {
item.tp002 = res.data.tp002;
item.tp003 = res.data.tp003;
item.tp004 = res.data.tp004;
item.tp006 = res.data.tp006;
item.tp005 = res.data.tp005;
item.tp007 = res.data.tp007;
item.tp010 = res.data.tp010;
item.tp008 = res.data.tp008;
item.tp009 = res.data.tp009;
item.tp011 = res.data.tp011;
}
})
.catch((err) => {
console.log(err);
});
},
}
//------------------------------------