JQuery Autocomplete函数触发多次的问题排查与优化需求

兄弟，我太懂你这种闹心的情况了——抄了项目里现成的产品搜索代码，结果搜索功能倒是能加载出结果，可每次点筛选后的产品，success回调居然会触发好多次，次数还跟着搜索次数往上累加，第一次点4次，第二次直接8次，换谁都懵。

先帮你拆解下大概率的原因：事件绑定重复了。你想想看，是不是每次输入搜索内容、或者页面某些操作触发时，都重新初始化了一遍autocomplete？或者在success回调里手动给搜索结果项绑定click事件，每次搜索成功都绑一遍，导致每个结果项身上挂了好几个事件处理器，点一下自然就触发好几次。

给你几个落地的解决思路，亲测好用：

1. 用Autocomplete自带的select事件，别自己绑click #

你之前可能在success里手动给结果加click事件，这是坑！Autocomplete本身提供了select事件，专门处理选中结果的逻辑，它内部会管理事件绑定，不会重复叠加。比如：

// 先销毁旧实例，避免重复初始化
$("#your-search-input").autocomplete("destroy").autocomplete({
  source: function(request, response) {
    // 这里发ajax请求查数据库
    $.ajax({
      url: "/your-product-search-api",
      data: { term: request.term },
      success: function(data) {
        response(data); // 把结果给autocomplete渲染就行，别在这绑事件！
      }
    });
  },
  // 用自带的select事件处理选中逻辑
  select: function(event, ui) {
    event.preventDefault(); // 阻止默认填充行为，按需使用
    // 这里写你选中产品后的业务逻辑，比如填充ID、跳转详情页
    console.log("选中产品：", ui.item.label, ui.item.value);
    // 放心，这个函数只会触发一次！
  },
  minLength: 2 // 按需设置最小触发搜索的字符数
});

2. 避免重复初始化Autocomplete #

如果你的搜索框是动态渲染的（比如在弹窗、tab页里），很容易不小心多次调用autocomplete()，导致每次都注册一遍事件。这时候一定要在初始化前先销毁旧实例，就像上面代码里的autocomplete("destroy")，确保每次都是全新的实例。

3. 手动绑事件的话，先解绑再绑定 #

如果实在要自己给结果项绑click事件（比如有特殊UI需求），那每次绑定前必须先解绑旧的事件处理器，避免叠加：

success: function(data) {
  response(data);
  // 先解绑所有旧的click事件，再绑定新的
  $(".ui-autocomplete li").off("click").on("click", function() {
    // 你的点击逻辑
  });
}

4. 排查是否重复发送请求 #

另外也可以检查下ajax请求是不是重复发送了——比如输入时没做防抖，导致短时间发了好几个请求，每个请求的success都触发了。这时候可以加个防抖函数，或者给ajax加cache、设置请求锁，避免重复请求。

之前项目里用if条件规避，本质上也是在防止重复执行逻辑，但上面这些方法是从根源上解决绑定重复的问题，比临时的if判断更靠谱。

备注：内容来源于stack exchange，提问作者Guru1804