Creating user friendly autocomplete inputs for mobile devices

Question

Note: Initially I posted this question for code review, but realized this is really a question about user interface.

I am working on an e-commerce website, I have 2 types of autocomplete inputs:

1. Address Finder (suggests locations)
2. Category Autocomplete (suggests category for a product)

The problem I'm solving is that on a mobile device, the autocomplete's suggestions opens under the input and the keyboard pops up and, sometimes, hides the suggestions as shown below:

What I want to do is to highlight the autocomplete input when it is focused in mobile devices. That is to bring it to the top of the screen and hide everything else. This is what ebay does on mobile devices.

Screen Shot of the Solution

Address Finder

---

Category Suggester

You can check the actual behavior here.

Questions

1. Any feedback/suggestion on this approach?
2. At the moment I am only using this approach for Autocomplete inputs. Category Suggester and Google Address Finder. Should I use the same approach for normal inputs? As you know, Chrome sometimes opens a suggestions dropdown for normal inputs... I feel having the keyboard and a suggestion box on the screen gets a bit too much.

Answer 1

Any feedback/suggestion on this approach?

You're doing absolutely great!

• Using the space
• Removing the clutters
• Focusing on the task (input in this case)

User should feel a good experience there

Should I use the same approach for normal inputs?

Although it's the best practice to keep the consistency in UI, interactions & layouts, that doesn't mean that you should use one thing repeatedly while it's not improving the usability. That might create some other useless complications too. Focus on the usability and the rest will be solved. If you can do it simple and straight, do it. Just keep the UI elements consistent. Consistency is a major key to a great user experience.