材质 UI 自动完成下拉位置

Question

如何禁用自动完成自动定位？

希望始终在底部显示自动完成选项。

https://codesandbox.io/s/material-demo-forked-t1luy?file=/demo.js

Answer 1

你可以用 flexbox

您可以用 Autocomplete 包裹您的 div 组件并添加以下样式

    <div style={{display: 'flex', alignItems: 'flex-end'}}>
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          style={{ width: 300}}
          renderInput={(params) => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
    </div>

Answer 2

对于当前最新版本的 MaterialUI，您可以使用属性 disablePortal 来实现当带有选项列表的弹出窗口始终显示在底部时的行为

应该是这样的

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300, paddingTop: 300 }}

  disablePortal={true}

  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>

Answer 3

property disablePortal={true} 对我有用。