Перемещение текста-заполнителя в компоненте автозаполнения в React
Я пытаюсь создать компонент Autocomplete пользовательского интерфейса материала. Вместо того, чтобы показывать предложения автозаполнения в виде раскрывающегося списка, как я могу отобразить его как движущийся заполнитель? Текст внутри компонента автозаполнения должен скользить влево?
Код: https://codesandbox.io/s/material-demo-forked-mgg7z?file=/demo.js
В результатах поиска («Крестный отец») в качестве заполнителя должен быть слайд, движущийся влево.
Мне нужен движущийся заполнитель внутри текстового поля. Движущийся заполнитель должен быть поисковыми подсказками. Например, если у меня есть текстовое поле поиска [для поиска в списке стран], пользователь должен иметь возможность видеть список стран внутри текстового поля в виде анимированного заполнителя, перемещающегося справа налево.
Ответы 2
В этой демонстрации я создал собственный хук useAnimatedPlaceholder.
https://codesandbox.io/s/material-demo-forked-2em32?file=/demo.js
Его можно легко вставить в любые входные базовые компоненты. Функциональность достигается с помощью комбинации useEffect и setTimeout. Дайте знать, если у вас появятся вопросы.
Если текстовое поле пусто, то должен быть движущийся заполнитель. Итак, для вашего примера в текстовом поле должно отображаться «Бог, побег из Шоушенка», перемещающееся справа налево [заполнитель] внутри текстового поля.
Анимированный заполнитель, который течет справа налево? Звучит как плохая идея UX, если бы она была внутри текстового поля, потому что это испортит пользовательский ввод. Как насчет под текстовым полем в качестве вспомогательного текста?
Как насчет реализации панели поиска на этом сайте: covid19india.org?
Действительно, этот пример имеет гораздо больше смысла. Я изменю свой ответ, когда у меня будет время
Вы также можете указать текстовое поле внутри автозаполнения.
Должен ли я отправить его в качестве реквизита?
Вы ищете поведение, похожее на то, что мы имеем в Gmail (автозаполнение текста при наборе электронных писем) или в MSExcel (где, если тот же текст отображается серым цветом)?