javascript - 自动滚动到自动完成中的特定选项

Question

假设我在下拉列表或AutocompleteMaterial-UI 中有一个项目列表，当我点击下拉列表时，如何自动滚动到列表中所需的项目，例如在列表中top100Films，我已经有了项目，意思是当我打开下拉菜单时，它首先显示：

{ label: 'The Shawshank Redemption', year: 1994 }

我想要实现的是，当我打开下拉列表时，项目列表应该从我想要的项目开始，例如：

{ label: 'Inception', year: 2010 }

应该作为第一个出现，但下拉列表应该自动滚动到该项目。

下面是整个代码：

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { label: 'The Shawshank Redemption', year: 1994 },
  ...
];

如何最好地做到这一点？

标签： javascriptreactjsmaterial-ui

Answer 1

如果要滚动到该选项，则需要识别 DOM 树上的等效元素，然后调用Element.scrollIntoView().

您可以通过使用 将数据属性附加到每个选项元素来做到这一点renderOption，然后每次用户打开时，使用document.querySelector()基于属性查找选项并滚动到它：

<Autocomplete
  onOpen={() => {
    setTimeout(() => {
      const optionEl = document.querySelector(
        `[data-name="${movieToScrollTo}"]`
      );
      optionEl?.scrollIntoView();
    }, 1);
  }}
  renderOption={(props, option) => {
    return (
      <li {...props} data-name={option.label}>
        {option.label}
      </li>
    );
  }}
/>

现场演示