elementUIinput模糊查询

<template>
    <div id="app">
        <el-autocomplete
            class="inline-input"
            v-model="state2"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
        ></el-autocomplete>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
</template>
<script>
    export default {
        created() {
            window.app = this;
        },
        name: 'aaaa',
        data() {
            return {
                input: '',
                restaurants: [],
                state2: ''
            };
        },
        mounted () {
            // this.restaurants = this.loadAll();
            // console.log(this.loadAll())
            this.porjectListInquire()
        },
        methods: {
            porjectListInquire() {
                const data = {
                    'projectName': ''
                };
                this.$ajax.porjectListInquire(data).then(result => {
                    console.log(result.data, "000000000000000000")
                    result.data.forEach(item => {
                        item.value = item.projectName
                    })
                    console.log(result.data)
                    this.restaurants = result.data
                }).catch(err => {
                    console.log(`err:${err}`);
                });
            },
            handleSelect (item) {
                console.log(item);
                this.input = item.projectAbb
            },
            querySearch (queryString, cb) {
                // console.log(queryString, "oooooo")
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // console.log(results, "oooooo")

                // 调用 callback 返回建议列表的数据
                cb(results);
                console.log('11111')
            },
            createFilter(queryString) {
                // console.log(queryString, "oooooo")
                console.log('22222')
                return (restaurant) => {
                    console.log(restaurant, "oooooo")
                    return (restaurant.projectName.indexOf(queryString) === 0);
                };
            }
        }
    }
</script>
<style lang="less" type="text/less">
    @import '~common/css/reset.css';
</style>

场景：模糊查询输入02后选择第二个

然后删除后面的几个字段，后端库里是没有删除后的项目名的，但是还可以发送修改后的字段

所以，针对此问题我们要给input添加一个blur时间，存储一下

 @blur="clickrealcustomerName"
 // 再data里面定义一个realcustomerName:''
 clickrealcustomerName (val) {
                console.log(this.realcustomerName, '......')
                this.formData.projectName是input现在的东西，realcustomerName是选择时存储的数值
                if (this.formData.projectName !== this.realcustomerName) {
                    this.formData.projectName = this.realcustomerName
                }
            },