如何允许通过在键盘上键入字母来触发 IonSelect 中的选项选择？

Question

我正在使用 Ionic 7 和 React 18。我有这个 IonSelect 组件用于从按字母顺序排列的列表中选择状态

    <IonSelect
      interface='popover'
      aria-label='State'
      value={contactInfo?.mailingAddress.region?.id}
      placeholder='Select State'
      onIonChange={(e) =>
        setContactInfo((prevInfo) => {
          const selectedRegionId = e.detail.value
          return {
            ...prevInfo,
            mailingAddress: {
              ...prevInfo.mailingAddress,
              region: regions.find((region) => region.id === selectedRegionId) || null
            }
          }
        })
      }
    >
      {regions.map((stateOption) => (
        <IonSelectOption key={stateOption.id} value={stateOption.id}>
          {stateOption.name}
        </IonSelectOption>
      ))}
    </IonSelect>

我希望它的行为类似于 HTML 选择菜单，当您键入一个字母时，列表会滚动到以该字母开头的选项。我该如何调整我必须适应的情况？

Answer 1

请遵循此示例。您可以使用它作为满足您要求的基本代码。

1. 这个想法是当你渲染选择时为每个选项添加一个标识符。
2. 当选择弹出窗口打开时，通过钩子添加按键事件监听器。
3. 捕获key-down事件按键，通过标识符找到select选项。
4. 滚动到该项目。

import React, { useEffect, useState } from "react";
import { IonItem, IonList, IonSelect, IonSelectOption } from "@ionic/react";

function Example() {
  const [st, setSt] = useState("");
  const [items, setItems] = useState([
    "Abc", "Bcd", "Def", "Ghijk", "HIdada", "ppp", "zrrr", "xrrr", "crrr", "vrrr",
    "brrr", "nrrr", "mrrr", "arrr", "srrr", "drrr", "frrr", "gqqq", "zxs", "qwe", "ert", "trg",
  ]);

  useEffect(() => {
    let content = document.getElementsByClassName("alert-radio-group");

    const handleKeyDown = (e) => {
      const key = e.key;
      var filteredItems = items.filter((item) =>
        item.toLocaleLowerCase().startsWith(e.key)
      );
      console.log(filteredItems);
      if (filteredItems && filteredItems.length > 0) {
        var filteredItem = filteredItems[0];
        let elements = document?.getElementsByClassName(
          filteredItem.toLocaleLowerCase()
        );
        console.log(elements);
        const y = document?.getElementById(elements[1].id)?.offsetTop;
        console.log(y);
        y && content[0]?.scrollTo(0, y);
      }
      console.log(e.key);
    };

    document.addEventListener("keydown", handleKeyDown, true);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [st]);

  return (
    <IonList>
      <IonItem>
        <IonSelect
          className="wrapper"
          aria-label="Fruit"
          placeholder="Select fruit"
          onIonChange={() => {
            setSt("X");
          }}
          onIonCancel={() => {
            setSt("X");
          }}
          onIonDismiss={() => {
            setSt("X");
          }}
          onClick={() => {
            setSt("L");
          }}
        >
          {items.map((item) => (
            <IonSelectOption
              key={item}
              value={item}
              className={item.toLocaleLowerCase()}
            >
              {item}
            </IonSelectOption>
          ))}
        </IonSelect>
      </IonItem>
    </IonList>
  );
}

export default Example;