如何将JS输入框keyup触发的缩减搜索改为点击提交按钮触发？

错误原因 #

• 你的修改代码存在语法错误，$("#searchbtn").this.bindEvent(...) 是非法写法，jQuery实例对象没有this属性，你混淆了F对象自带的bindEvent方法调用逻辑和jQuery的DOM操作语法。
• 原bindEvent方法是给传入的第一个元素（也就是搜索输入框）绑定对应事件，现在你要触发搜索的主体变成了按钮，事件源从输入框变成了按钮，不能直接沿用原来的传参逻辑。
• 按钮放在form标签内默认是submit类型，点击会触发表单提交刷新页面，需要先阻止默认行为。

修复后的代码 #

修改initSearch里的事件绑定部分即可：

F.initSearch = function(opts) {
    if(!opts || !opts.ele) {
        return;
    }
    if(!opts.start_length) {
        this.opts.search.start_length = 2
    }
    this.$search_ele = $(this.opts.search.ele);
    if(this.$search_ele.length) {
        this.has_search = true;
        this.searchFn = this.buildSearchFn(opts.fields);
        // 注释掉原输入框keyup绑定
        // this.bindEvent(opts.ele, 'keyup');
        
        const self = this;
        // 给搜索按钮绑定点击事件
        $('#searchbtn').on('click', function(e) {
            // 阻止表单默认提交刷新行为
            e.preventDefault();
            // 校验输入长度符合要求再触发搜索
            const inputVal = self.$search_ele.val().trim();
            if(inputVal.length >= self.opts.search.start_length) {
                self.searchFn();
            }
        })
    }
};

可选优化 #

如果需要兼容回车键触发搜索，可以额外给输入框绑定keyup事件，仅判断按下回车键时触发搜索：

self.$search_ele.on('keyup', function(e) {
    if(e.keyCode === 13) {
        e.preventDefault();
        const inputVal = self.$search_ele.val().trim();
        if(inputVal.length >= self.opts.search.start_length) {
            self.searchFn();
        }
    }
})

内容的提问来源于stack exchange，提问作者JS_basic_knowledge