如何在AJAX的success回调中绑定keyup事件实现列表实时搜索

问题解答 #

首先可以明确：在AJAX的success回调函数内创建功能函数、绑定事件是完全合法的，你的代码无法生效是存在多个语法、逻辑错误，具体问题和修正方案如下：

现存问题整理

• 事件绑定时机错误：keyup事件绑定逻辑被放在了「AJAX请求成功时输入框内容长度>0」的判断分支里，页面初始化时如果输入框为空，事件根本不会绑定，后续输入内容也不会触发搜索逻辑
• 语法拼写错误：字符串匹配方法includes被误写为incudes，会直接抛出JS错误导致逻辑中断
• 渲染逻辑错误：
  1. 搜索匹配分支中，无论是否匹配成功都会追加一次访客信息，匹配成功的条目会重复展示
  2. keyup触发后生成的DOM字符串没有赋值给结果容器的innerHTML，页面不会更新
  3. 每次搜索前没有清空DOM字符串变量，内容会不断累加重复
• DOM结构错误：你生成的<a>标签是空的，访客信息的<p>标签写在了<a>标签外部，无法触发详情跳转
• 变量声明缺失：k、i都没有使用let/const声明，属于隐式全局变量，容易引发变量污染问题

修正后代码

function returnVisitors() {
  // 保留原有加载态逻辑
  document.getElementById('visitors_results').innerHTML = `
    <div class=" flex justify-center items-center" id="spinner">
      <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-gray-900"></div>
    </div>
  `;
  $.ajax({
    type: 'GET',
    url: '/vistors/list',
    success: function(data) {
      const visitors = data.visitors;
      const $searchInput = $('#search_visitors');
      const $resultContainer = $('#visitors_results');

      // 直接在success回调内定义公共渲染函数，完全符合JS语法规则
      function renderList(list) {
        let htmlStr = '';
        list.forEach(item => {
          const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/, parseInt(item.id));
          htmlStr += `<a href="${detail_url}" class="flex hover:bg-purple-900 hover:text-white items-center border rounded-xl mt-1 p-2">
            <p class="mr-2">${item.full_name} - ${item.city}</p>
          </a>`;
        });
        $resultContainer.html(htmlStr);
      }

      // 初始化渲染全量访客列表
      renderList(visitors);

      // 统一绑定搜索事件，不受初始输入框内容影响
      $searchInput.off('keyup').on('keyup', function() {
        const keyword = this.value.trim().toLowerCase();
        // 关键词为空时直接渲染全量列表
        if (!keyword) {
          renderList(visitors);
          return;
        }
        // 过滤匹配的访客
        const filteredList = visitors.filter(item => {
          return item.full_name.toLowerCase().includes(keyword);
        });
        renderList(filteredList);
      });
    }
  });
}

你的HTML代码无需修改，替换上述JS逻辑即可正常实现实时搜索功能。

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