Интерфейс поиска материалов, смешанный, с автозаполнением и реагированием

Question

У меня есть компонент AppBar (предоставляемый пользовательским интерфейсом материалов), я хочу, чтобы мое поле Searchbox действовало так же, как оно действует в:

https://material-ui.com/.

Как вы можете видеть, это своего рода смесь Searchbox и Autocomplete - по виду она выглядит как Searchbox, но после ввода значения - возвращает набор выбираемых опций (эффект Autocomplete).

Документы пользовательского интерфейса материала дают следующий компонент для поиска, который я буду использовать sh:

https://material-ui.com/components/app-bar/#app -bar-with-a-primary-search-field

и для автозаполнения :

https://material-ui.com/components/autocomplete/

Что бы вы предложили, ребята, получить этот результат, такой же, как их?

Answer 1

Я выбрал Material UI Customized Autocomplete и AppBar с полем поиска Я создал их вместе и создал небольшой пример для вас codesandbox .

Основная идея здесь - соединить Поппер с любым элементом, который вы хотите.

Надеюсь, я вам помог. Пожалуйста, не стесняйтесь задавать больше вопросов:)