React实现输入框实时前缀匹配对象数组并渲染（基于airplaneCompany属性）

云原生阿岚

2026-4-27

实现实时前缀匹配的航班筛选

嘿，我懂你的需求啦——现在的完全匹配确实不够灵活，改成前缀实时匹配只需要调整filter里的判断逻辑就行，用JavaScript的startsWith()方法就能轻松搞定，还能顺便优化大小写敏感的问题，让用户体验更顺畅。

修改后的完整代码示例：

const [txtInp, setTxtInp] = useState("");
// 调整筛选逻辑，实现前缀匹配+大小写不敏感
const showFlight = users.filter((user) => {
  // 统一转成小写，避免输入大小写影响匹配结果
  const inputContent = txtInp.toLowerCase();
  const companyName = user.airplaneCompany.toLowerCase();
  // 判断公司名称是否以输入内容开头
  return companyName.startsWith(inputContent);
});

{showFlight.map((user) => {
  const { id, airplaneCompany, passenger } = user;
  return (
    <div className="flightContainer" key={id}> {/* 用id作为key比index更稳定，避免渲染异常 */}
      <div>{id}</div>
      <div>{airplaneCompany}</div>
      <div>{passenger}</div>
    </div>
  );
})}

关键改动说明：

替换了原来的==完全匹配逻辑，改用startsWith()方法，只要airplaneCompany以输入的字符开头就会被筛选出来，输入过程中每打一个字都会实时更新结果
增加了toLowerCase()统一转小写处理，这样用户输入"air"或"Air"都能匹配到"AirChina"这类结果，避免大小写敏感导致的漏匹配
优化了列表项的key：建议用user.id而非index作为key，当列表项顺序变化时，React的渲染会更高效稳定