Add autocomplete search

[Joozty]

No description provided.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/oacore/next/qcz0lsn80
✅ Preview: https://next-git-autocompletion.oacore.vercel.app

[Joozty]

@viktor-yakubiv can you please help me out here? It would be nice if you can review and tell me how it should look like. So I can style it properly (if needed)

[viktor-yakubiv]

I hope the following guide from the Material Design will be useful for you.

It may look hard in the implementation but there is a reasoning behind. Icons visual size is 16x16 pixels when the actual SVG file is 24x24. This is because of visual balancing: if you have a square next to the circle, to make it look visually the same the square should be 16 pixels sized when the circle diameter should be about 20 pixels. Because of combining different shapes, we make icons 24x24 but always add -0.25rem margin.

The button clickable area should be big enough to let mobile users easily touch it, that is why buttons are at least 32 pixels but iconic ones are 40-pixel circles.

I am not saying you have something wrong with spacing because I haven't checked. Here, I wanted to say that the 'clear button' should be a circle 40x40 but the icon should stay where it is.

[viktor-yakubiv]

I like the visual look overall 👍 However, I have some behavioural remarks:

• when I type something and unfocus the input, the form is submitted
• once I pressed on the clear icon after typing, the input became unfocussed and the forms submitted

I did not check the code because I think you are aware of it.

[Joozty]

@viktor-yakubiv Thanks for the image. I think I managed to do it. (I may be one or two pixels off but it should be fine). Can you please have a look?