Диалоговое окно пользовательского интерфейса материала с возможностью поиска - PullRequest
Новая
       25

Диалоговое окно пользовательского интерфейса материала с возможностью поиска

0 голосов
/ 13 апреля 2019

Я создаю функцию поиска для диалогового окна, в котором пользователь может начать вводить слово, и после каждого нажатия клавиши поиска БД возвращает результаты сопоставления.Затем эти результаты отображаются в диалоговом окне, где пользователь может выбрать один из параметров.

Функциональность работает, однако, когда отображаются результаты БД, размер диалогового окна изменяется в соответствии с этими результатами.Я бы предпочел, чтобы список выбора отображался вместе с содержимым результатов поиска.

Я пытался использовать 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
...