javascript - 如何使列表的第一项始终位于顶部，列表的其余部分将独立于它滚动

Question

是否可以将列表的第一项定位到列表的顶部并且不与其他项目一起滚动？

     <Select
            open={open}
            value={value}
            onChange={this.handleSelectChange}
            onClose={this.handleSelectClose}
            onOpen={this.handleSelectOpen}
          >
            <MenuItem
              style={{
                backgroundColor: "transparent"
              }}
            >
              <TextField
                value={search}
                fullWidth
                placeholder="search"
                onChange={this.handleInputChange}
              />
            </MenuItem>
            {filteredOptions.length ? (
              filteredOptions.map(option => {
                return (
                  <MenuItem value={option} key={option.value}>
                    {option.label}
                  </MenuItem>
                );
              })
            ) : (
              <MenuItem disabled>No match</MenuItem>
            )}
     </Select>

它看起来像是 https://sharlaan.github.io/example3 上的自动完成

Answer 1

从 UX 的 Angular 来看，我不会将搜索字段放在列表中......你为什么不直接使用 Material-UI 的自动完成组件？在这种情况下，您将拥有一个普通的文本字段，一旦用户开始输入，它就会打开相应的列表。参见 https://material-ui.com/demos/autocomplete/例如如何使用它...

如果你想要一个更复杂的选择组件，我可以推荐 React-Select ( https://react-select.com )。但是如果你想让它与 Material 的外观和感觉相匹配，你就必须自己设计它的样式......