element input历史查询(模糊查询)以及防抖处理

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);
        });
    },
}
//------------------------------------