页面表格数据实时更新时不能影响搜索框输入

需求:更新数据时走接口虽然只是局部更新,但会在客户输入时影响客户操作,失去焦点,所以改进的时候想着加一个input监听客户输入,在用户不输入时继续正常更新表格数据,当监听到用户输入时停止更新

页面展示:

html代码

<div id="school-search" class="_searchBtn">
                <input type="text" id="txtSurveyName" @keydown="searchData" v-model="txtSurveyName" placeholder="请输入调研名称" name="name"/>
                <div @click="search()">
                    <img src="/images/search.png" alt="搜索">
                </div>
            </div>

            <div>
                <div>
                    <select id="selIntervalTime" @change="refresh()">
                        <option value="">手动刷新</option>
                        <option value="10">10秒</option>
                        <option value="20">20秒</option>
                        <option value="30">30秒</option>
                        <option value="60">60秒</option>
                    </select>
                </div>
        </div>

js代码

 // 监听输入框
        searchData(){
            if(this.searchTime !== null || this.interval != null){
                clearTimeout(this.searchTime);
                clearInterval(this.interval);
            }
            this.searchTime = setTimeout(() => {
                //业务实现语句
                this.refresh()
            })
        },
        // 刷新
        refresh() {
            var nIntervalTime = $("#selIntervalTime").val();
            if (nIntervalTime != "") {
                this.interval = setInterval(this.search, nIntervalTime * 1000);
            } else {
                if (this.interval != null) {
                    this.interval = null;
                    clearInterval(this.interval);
                }
                // this.search();
            }
        },

这样算是取巧实现了吧,暂时也没想到其他啥好的解决想法.

内容仅供参考,如有问题请指出.