如何在NextUI Autocomplete中实现虚拟滚动？

首先确认你使用的是NextUI v2版本，虚拟滚动是v2新增特性，v1不支持该功能。

你的代码里已经设置了listboxProps={{ isVirtualized: true }}，但虚拟滚动生效还需要满足两个关键条件：

• 给弹出列表设置固定高度：通过listboxProps传入style或className指定高度，虚拟列表需要明确的可视区域高度来计算需渲染的项。
• 如果列表项高度不统一，需传入itemSize参数指定预估高度（可选，默认值为36px）。

修正后的代码示例：

const [keyword, setKeyword] = useState(props.value);

const debounced = useDebounce(keyword, 300);
const filtered = useMemo(
  () => props.options?.filter((d) => d.label.includes(debounced)),
  [debounced],
);

return (
  <AppAutoComplete
    fullWidth
    {...props}
    popoverProps={{
      placement: "top",
    }}
    listboxProps={{
      isVirtualized: true,
      dir: "rtl",
      // 设置虚拟列表的可视高度
      style: { maxHeight: "300px", overflow: "auto" },
      // 若项高度非默认36px，指定预估高度
      // itemSize: 40,
    }}
    items={filtered}
    onInputChange={(change) => {
      setKeyword(change);
    }}
    onSelectionChange={(key) =>
      props.onChange({ target: { value: key as string } })
    }
  >
    {(option: any) => (
      <AutocompleteItem key={option.value}>{option.label}</AutocompleteItem>
    )}
  </AppAutoComplete>
);

额外注意事项：

• 当isVirtualized设为true时，NextUI会自动切换为虚拟滚动列表，无需额外引入其他组件。
• 确保filtered数组稳定（你已用useMemo处理，这部分没问题），避免不必要的重渲染影响虚拟滚动性能。

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