如何将reductive search触发逻辑从keyup事件改为按钮点击事件

我在JS学习中取得了一些小进展后（目前仍处于入门学习阶段），接到了一个修改类精简搜索（reductive search）功能的任务。用户现在希望搜索功能通过点击提交按钮触发，而非输入满3个字符后的keyup事件触发。

我查阅了体积较大的JS文件，找到了包含keyup事件绑定的搜索初始化函数，代码如下：

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);
    this.bindEvent(opts.ele, 'keyup');
  }
};

我在将触发逻辑从keyup改为按钮点击时遇到了问题，这段JS的复杂度超出了我当前的技术水平。

• 修改表单代码新增了搜索按钮，代码如下：

<form>
    <div class="searchBox">
      <input type="text" id="search" class="search__text-input" placeholder="Search"/>
    </div>
   
    <div class="formBox">
        <button id="searchbtn">Search</button>
    </div>     
</form>

• 尝试按照原有逻辑用jQuery修改事件绑定代码，写了如下代码：

$( "#searchbtn" ).this.bindEvent(opts.ele, 'click');

修改后的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);
        // this.bindEvent(opts.ele, 'keyup');

/* Trying to swap keyup for button click */

        $( "#searchbtn" ).this.bindEvent(opts.ele, 'click');



    }
};

我之前实现点击搜索的写法是这样的：

<input type='button' value='Submit search' onClick='submitSearch()' />

<script language="javascript" type="text/javascript">
    function submitSearch() {
       $("#searchId").submit();
    }
</script>

你代码出错的核心原因是语法逻辑错误：bindEvent是挂载在F对象上的自定义方法，不属于jQuery元素的原生方法，$( "#searchbtn" ).this的写法完全不符合JS语法规范。

可直接按照下方代码修改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 _this = this; // 保存F对象的this指向，避免回调内this偏移
        // 给搜索按钮绑定点击事件
        $('#searchbtn').on('click', function(e) {
            // 阻止按钮默认的表单提交行为，避免页面刷新
            e.preventDefault();
            // 可选：保留原有的最小输入长度校验逻辑
            const inputContent = _this.$search_ele.val().trim();
            if(inputContent.length >= _this.opts.search.start_length) {
                _this.searchFn();
            }
        })

        // 可选扩展：支持按下回车键触发搜索
        _this.$search_ele.on('keydown', function(e) {
            if(e.keyCode === 13) {
                e.preventDefault();
                $(this).blur(); // 可选：触发后收起输入法键盘
                _this.searchFn();
            }
        })
    }
};

如果你的bindEvent方法本身已经封装了长度校验、防抖等通用逻辑，也可以直接修改绑定目标和事件类型，写法更简单：

// 替换原来的keyup绑定即可
this.bindEvent('#searchbtn', 'click');

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