React搜索自动补全功能求助：输入前缀即展示相关结果

核心问题 #

你当前的API请求是/course-details/${searchTerm}，这个接口应该是精确匹配传入的关键词，只有输入完整课程名称才返回结果，所以没法实现前缀触发的自动补全。

提供两种解决思路：

思路一：修改后端API支持前缀查询 #

让后端接口接受前缀参数，返回所有课程名称以该前缀开头（或包含该前缀）的结果。比如把请求改成：

fetch(`http://localhost:4000/course-details?prefix=${encodeURIComponent(searchTerm)}`)

后端需要调整查询逻辑：

• SQL场景：用WHERE courseName LIKE '${searchTerm}%'（注意用参数化查询防注入）
• MongoDB场景：用{ courseName: { $regex: new RegExp('^' + searchTerm, 'i') } }

思路二：前端本地过滤（适合数据量小的情况） #

如果课程总数不多，可以一次性拉取所有课程数据，然后在前端实时过滤：

1. 新增状态存储全量课程：

const [allCourses, setAllCourses] = useState([]);

2. 组件挂载时拉取全部课程：

useEffect(() => {
  fetch('http://localhost:4000/course-details')
    .then(res => {
      if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
      return res.json();
    })
    .then(data => setAllCourses(data))
    .catch(err => console.error('拉取课程失败:', err));
}, []);

3. 修改搜索逻辑，替换原API请求为本地过滤：

// 先补充定时器状态
const [typingTimeout, setTypingTimeout] = useState(null);

useEffect(() => {
  if (searchTerm.trim() === "") {
    setSearchResults([]);
    setDropdownOpen(false);
    return;
  }

  // 清除上一次的定时器，避免重复触发
  if (typingTimeout) clearTimeout(typingTimeout);

  const timeout = setTimeout(() => {
    // 不区分大小写的前缀匹配
    const filteredCourses = allCourses.filter(course => 
      course.courseName.toLowerCase().startsWith(searchTerm.toLowerCase())
    );
    setSearchResults(filteredCourses);
    setDropdownOpen(filteredCourses.length > 0);
  }, 300);

  setTypingTimeout(timeout);
  // 组件卸载时清除定时器
  return () => clearTimeout(timeout);
}, [searchTerm, allCourses]);

额外修复点 #

原代码里还有几个未定义的函数，需要补充实现：

// 月份切换函数
const handlePrevMonth = () => setMonthIndex(prev => prev - 1);
const handleNextMonth = () => setMonthIndex(prev => prev + 1);

// 课程点击函数
const handleCourseClick = (course) => {
  setSelectedCourseDetails(course);
  setIsModalOpen(true);
  closeDropdown();
};

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