表单搜索时输入框内容清空后怎么自动重新加载全部数据？

UP主～雯清提问于 2026-03-13 11:52:20 阅读 68

交互

我在做一个带搜索功能的用户列表页面，输入关键词能正常过滤，但清空输入框后列表没变回全部数据，还是显示上次搜索的结果，这咋办？

我试过监听 input 事件，但清空的时候好像没触发重新获取原始数据的逻辑。下面是我的处理函数：

const handleSearch = (e) => {
  const keyword = e.target.value.trim();
  if (keyword) {
    filteredUsers = allUsers.filter(user => 
      user.name.includes(keyword)
    );
  }
  // 清空时没处理！这里是不是得加 else？
  renderList(filteredUsers);
};

表单交互表单搜索

我来解答赞 2 收藏

反馈

1 条解答

UX思涵 Lv1

对，加个else就行。清空时把数据重置为全部：

const handleSearch = (e) => {

  const keyword = e.target.value.trim();

  if (keyword) {

    filteredUsers = allUsers.filter(user => 

      user.name.includes(keyword)

    );

  } else {

    filteredUsers = allUsers; // 清空时恢复全部数据

  }

  renderList(filteredUsers);

};

或者更简洁点：

const handleSearch = (e) => {

  const keyword = e.target.value.trim();

  filteredUsers = keyword 

    ? allUsers.filter(user => user.name.includes(keyword))

    : allUsers;

  renderList(filteredUsers);

};

2026-03-13 12:05