如何在我的 nextjs/typescript/fetch 应用程序中搜索这个数组？

Question

我一直在尝试寻找方法来搜索这个数组（CustomersList），但没有走得太远。非常感谢您的帮助。

获取后（响应完成了什么）：

const data = await res.json();
  return {
    props: {
      CustomersList: data,
    }
  };

我如何将数据显示到页面：

<ul className="customers">
          {CustomersList.map((customer) => (
            <form method="POST" action={AppendUrl(customer.Id)}>
              <table className="customer-list">
                <tr>
                  <th>Customer Name:</th>
                  <th>Customer Id:</th>
                </tr>
                <tr>
                  <td>{customer.Name}</td>
                  <td>{customer.Id}</td>
                  <input type="submit" value="Select"/>
                </tr>
              </table>
            </form>
          ))}
        </ul>

我想向其中添加一个搜索栏，以便能够按客户的姓名（customer.Name）搜索这些客户

Answer 1

我实际上发现了一些非常有用的代码。

搜索码：

//Search Customer
  const [name, setName] = useState("");
  const [foundCustomers, setFoundCustomers] = useState(CustomersList);

  const filter = (e: { target: { value: any } }) => {
    const keyword = e.target.value;

    if (keyword !== "") {
      const results = CustomersList.filter((customer) => {
        return customer.Name.toLowerCase().startsWith(keyword.toLowerCase());
        // Use the toLowerCase() method to make it case-insensitive
      });
      setFoundCustomers(results);
    } else {
      setFoundCustomers(CustomersList);
      // If the text field is empty, show all users
    }

    setName(keyword);
  };

搜索框输入码：

<ul className="customers">
        <input
          type="search"
          value={name}
          onChange={filter}
          className="input"
          placeholder="Customer Name"
        />
        {foundCustomers && foundCustomers.length > 0 ? (
          foundCustomers.map((customer) => (
            <form method="POST" action={AppendUrl(customer.Id)}>
              <table className="customer-list">
                <>
                  <tr>
                    <th>Customer Name:</th>
                    <th>Customer Id:</th>
                  </tr>
                  <tr>
                    <td>{customer.Name}</td>
                    <td>{customer.Id}</td>
                    <input type="submit" value="Select" />
                  </tr>
                </>
              </table>
            </form>
          ))
        ) : (
          <h1>No results found!</h1>
        )}
      </ul>