vue使用watch監聽實現即時搜索功能

<template>
    <div>
        vue使用watch監聽實現類似百度搜索功能
        <div>
            <input type="text" class="search" placeholder="搜索" v-model.trim='keyword' />
        </div>
        <div v-show="keyword">
            <ul>
                <li v-for="item in cityList" :key="item.id" @click="handleCityClick(item.name)">
                    {{item}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 節流函數
const delay = (function () {
    let timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback.ms)
    }
})()
export default {
    name: "cinemaTwo",
    data () {
        return {
            keyword: '',
            cityList: [],
            timer: null,
            jsonData: [{
                'id': 1,
                'name': '北京'
            },
            {
                'id': 2,
                'name': '上海'
            },
            {
                'id': 3,
                'name': '廣州'
            },
            {
                'id': 4,
                'name': '深圳'
            },]
        }
    },
    watch: {
        keyword () {
            //函數節流
            if (this.timer) {
                clearTimeout(this.timer)
            }
            //刪除文字  清零
            if (!this.keyword) {
                this.cityList = []
                return
            }
            this.timer = setTimeout(() => {
                const result = []
                this.jsonData.forEach(val => {
                    if (val.name.indexOf(this.keyword) > -1) {
                        result.push(val.name)
                    }
                });
                this.cityList = result
                console.log(this.cityList)
            }, 100)
        }
    },
    methods: {

    },
}
</script>

<style lang="scss" scoped>
</style>