vue通过localStorage实现输入框历史记录提示的效果

项目场景

给输入框增加历史记录的提示

效果如图

代码实现

 <div>
     <span style="color: red">* </span>
     <span>委托单位/Applicant</span>
     <el-form-item>
         <el-autocomplete
             v-model="applicantCompany"
             :fetch-suggestions="queryApplicantCompanySearchAsync"
             placeholder="请输入委托单位"
             style="width: 100%"
             @focus="applicantCompanyFocus()"
         ></el-autocomplete>
     </el-form-item>
 </div>

export default {
	data(){
        return {
        	applicantCompany: '',
        	applicantCompanyOftenList: [],
        }
    },
    methods: {
    	applicantCompanyFocus(){
            var r = window.localStorage.getItem('applicant_company');
            if(r != null){
                this.applicantCompanyOftenList = JSON.parse(r);
            }
        },
         queryApplicantCompanySearchAsync(queryString, cb) {
            var applicantCompanyOftenList = this.applicantCompanyOftenList;
            var results = queryString ? applicantCompanyOftenList.filter(this.createFilter(queryString)) : applicantCompanyOftenList;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 1000 * Math.random());
        },
        //保存所填的内容到localStorage
        handleHistoryRecord(){
            var vm = this;
            var list = JSON.parse(window.localStorage.getItem('applicant_company'));
            var newList = [];
            if(list != null){
                //去重
                newList = list.filter(function (item) {
                    return item.value != vm.applicantCompany;
                });
            }
            newList.unshift({value: vm.applicantCompany});//置于顶部
            if (newList.slice(0, 5)) {
                window.localStorage.setItem('applicant_company', JSON.stringify(newList.slice(0, 5)));
            }
        },
        createFilter(queryString) {
            return (item) => {
                return (item.value.toString().toLowerCase().includes(queryString.toString().toLowerCase()) === true);
            };
        },
    },
}