Ideas on dismissing a popover without a Close element

Question

I have mocks from a designer showing an initial form for searching a location. There are fields for location (business) name and city (pre-filled) and a Next button (disabled at first). When the user starts typing in the Location Name field, a div containing search results appears in real time under the Location Name field. To choose a location, the user taps on the result of his choice, the list goes away, and the choice is displayed below the Next button, which is now enabled.

A QA colleague is concerned that if the user chooses from the list, decides to search again, then changes his mind and wants to go with his first choice, how does he dismiss the results list without having to choose another selection from the list and re-search for his original choice? Currently, that is the only way to dismiss the list. The results list covers the Next button, by the way. One option is to add a "Close" or "X" icon to the search results list, but that is a visual challenge. Another colleague suggested using the Next or Done buttons that appear on Mobile Safari's form assistant bar, but Next only tabs between form elements and Done just unfocuses a form element then hides the keyboard.

I'm looking for suggestions on how to close the search results, either with a slight redesign or if there's a way to customize Mobile Safari's form assistant and having a button tap action tied to closing the div of results. (e.g. Cancel instead of Done). The solution should also work in other devices; I'm just using iPhones as an example. This is also not a native app; it's a website.

Original mocks -

Answer 1

From my comment above.

One way of implementing this is to add a little gray 'x' symbol at the end of the input area, that when clicked will clear both the input area and the dropdown results. This system is fairly widespread so users are likely to understand it (for example, Windows Explorer's search box uses this). However, you can always add a caption above the search box to say that clicking the icon will clear your search.

The second method of doing it is pretty well-known too. You can detect a click outside the box and use this as a trigger to clear the input and results. However, I think the former method is better as it can be implemeted without JavaScript (using a type 'reset' form control) and as such will always be available to all users regardless of whether they have JavaScript enabled or not.

Answer 2

Two options

1. Detect tap/touch/click outside the input box and search results (if you wanna avoid x button)
2. Go with traditional x button

But users might not know how to close if only option 1 is implemented, until they try.