根据值（API）搜索输入字段

我有这样一个api调用：api/zipCode/${zipCode}

---

因此，我有一个输入字段，用户输入邮政编码，我想做的是，如果用户输入3位数字，我想显示匹配的邮政编码。例如，e如果用户输入123，我想显示123、1234、1233等。因为我不知道如何构建它，我正在寻找您的帮助。任何想法都是宝贵的。

请在下面找到解决方案

此外，您还可以看到现场演示

从“react”导入{useffect，useState，usemo}；
常量端点=”https://jsonplaceholder.typicode.com/users";
导出默认函数App（）{
const[users，setUsers]=useState（[]）；
const[loading，setLoading]=useState（true）；
常量[searchText，setSearchText]=useState（“”）；
useffect（（）=>{
（异步函数（）{
const res=等待获取（端点）；
const data=wait res.json（）；
设置用户（数据）；
设置加载（假）；
})();
}, []);
常量过滤器数据=使用备忘录（（）=>{
如果（searchText.length>3）{
返回users.filter（（user）=>user.address.zipcode.includes（searchText））；
}
返回null；
}，[用户，搜索文本]；
如果（加载）返回加载…
；
返回(
键入searchbox以获取具有匹配zipcode的用户
setSearchText（e.target.value）}
/>

{filterData&&
filterData.map（（数据）=>(
{data.address.zipcode}
))}

);
}

您使用的是哪种前端技术？我会给你一个解决方案。我正在使用React，但也在使用Redux。给我一些时间，我会给你解决方案。非常感谢！它工作得非常出色，但正如你所看到的，我的终点是完全不同的。如果在端点的末尾写入zipcode，我会得到zipcodes。你能告诉我怎么做吗？所以，如果我没有弄错的话，只要搜索文本长度大于3，你就想向服务器发送请求以获取匹配的邮政编码列表？另外，您能给我您的端点或匹配的端点，以便我能给您提供解决方案吗？我的端点类似于：api/cities/get\u with_zip/${zipCode}

import { useEffect, useState, useMemo } from "react";

const endPoint = "https://jsonplaceholder.typicode.com/users";

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchText, setSearchText] = useState("");

  useEffect(() => {
    (async function () {
      const res = await fetch(endPoint);
      const data = await res.json();
      setUsers(data);
      setLoading(false);
    })();
  }, []);

  const filterData = useMemo(() => {
    if (searchText.length > 3) {
      return users.filter((user) => user.address.zipcode.includes(searchText));
    }
    return null;
  }, [users, searchText]);

  if (loading) return <p>Loading...</p>;

  return (
    <div className="App">
      <h1>Type in searchbox to get the user with matching zipcode</h1>
      <input
        type="text"
        placeholder="Search Zip"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
      />
      <ul>
        {filterData &&
          filterData.map((data) => (
            <li key={data.id}>{data.address.zipcode}</li>
          ))}
      </ul>
    </div>
  );
}