What's the right UI idiom for seeing content obscured by a search bar keyboard?

Question

I've got a situation where there's a list of items to search and a search bar to enter text. When the search bar has focus, the onscreen keyboard pops up. This looks like so:

(Note that the list contains only items that contain the search string (just an "e" in this case.)

The problem is that when the keyboard is visible, you can't see the content beneath it. I can imagine shortening the results list so that the bottom rises up above the keyboard, but then the list is very short. Or maybe the keyboard could wait for the user to stop typing and then hide itself, but that could be confusing.

What's a good way to address this situation?

Answer 1

I would do nothing and let the device handle it. Take a look at iOS's own search page. It works just like this...you see a long list. If you click the list to scroll, it just hides the keyboard for you.

In the web browser, Google does a similar behavior, though it doesn't hide the keyboard (you can scroll, though).

My main argument for NOT shortening the height of the results list is that if you put the phone in landscape mode, you're going to fit 1, MAYBE 2 results and that's going to be an impossible small area to scroll easily through.

Answer 2

The best way to approach this is to shorten the actual height of the tableview that contains the results so that it's bottom is resting on top of the keyboard. Thus, the user can scroll through the entire list of results with the keyboard present if needed. I believe this is what you mentioned in one of your solution scenarios. Definitely do not auto-hide for the user. Also, when the user actually clicks search you will dismiss the keyboard and re-expand the table's height.