Creating user friendly autocomplete inputs for mobile devices

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:

enter image description here

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

enter image description here

Category Suggester

enter image description here

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.
Tags: , , , , , ,