具有可搜索选择列表的“材料UI”对话框

Question

我正在为对话框构建搜索功能，用户可以在其中开始输入单词，并且在每次击键之后，数据库搜索都会返回匹配的结果。然后，这些结果将显示在对话框中，用户可以在其中选择选项之一。

该功能正在运行，但是当显示数据库结果时，对话框将调整大小以适合这些结果。我希望选择列表与搜索结果的内容一起出现。

我尝试使用Material UI Select来创建选择列表，但是我无法使其在用户输入上运行。

<Dialog
disableBackdropClick
disableEscapeKeyDown
maxWidth={'xs'}
fullWidth={true}
open={this.state.open}
onClose={this.handleClose}
className={classes.dialogbox}
>
<DialogContent className={classes.dialogbox2}>        
    <List>
      <ListItem button className={classes.nested}>
          <Input onChange={this.brewerySearch()} type="search" 
                 placeholder="Search Your Brewery" value={this.state.breweryName}/>
      </ListItem>
          <Collapse in={this.state.openSearch1} unmountOnExit>
                    {this.props.brewery.map( brewery => (
              <ListItem button key={brewery.name} onClick={() => this.selectBreweryName(brewery.name)}>
              <ListItemIcon><AddCircle/></ListItemIcon>
              <ListItemText inset primary={brewery.name}/>
              </ListItem>
                    ))}
          </Collapse>
    </List>

</DialogContent>
</Dialog