Moving placeholder text in Autocomplete component in React

Question

I'm trying to create a Material UI's Autocomplete component. Instead of showing suggestions of Autocomplete as dropdown, How can I show it as moving placeholder? The text inside the Autocomplete component should slide in left?

Code: https://codesandbox.io/s/material-demo-forked-mgg7z?file=/demo.js

The search results (The Godfather) should have a slide in left motion as a placeholder.

user_10537720 · Answer

I created a custom hook useAnimatedPlaceholder in this demo

https://codesandbox.io/s/material-demo-forked-2em32?file=/demo.js

It can be easily inserted into any input base components. The functionality is achieved via using the useEffect and setTimeout combo. Let me know if you have any questions.

user_14951932 · Answer

You can also give a text field inside autocomplete.

Moving placeholder text in Autocomplete component in React

2 Answers