Filtering and searching with UISearchBar on the iPhone?

Question

For iPhone development, is there any UI/UX pattern I should be following with the UISearchBar to permit both filtering and searching?

My use case is one screen were we display nearby in a UITableView nearby restaurants pulled from Yelp. Above the restaurants we have a search bar. When the user initially displays this screen, we display the nearest 30 or so restaurants from Yelp. Now above the UITableView we have a UISearchBar; entering text into the search bar will filter the 30 or so restaurants displayed (like filtering your Contacts), but if you're in a city with a high density of restaurants, you may be looking for a restaurant that is not on that list. Now I want the search bar to not filter, but actually search, whereby I can use their input as a query parameter in a HTTP request to Yelp in an attempt to retrieve the restaurant that they actually want.

Any patterns or inspiration on the best way to do this? The iPhone HIG says that I can enable a "results list" icon for the search bar that "indicates the presence of search results. When users tap the results list icon, your app can display the results of their most recent search." Does this mean that the Search button the keyboard will really filter, and pressing the results list icon will actually perform a search? Any examples of its usage anywhere?

Right now I'm leaning toward displaying a "Search for a restaurant..." row above the 30 or so restaurants initially displayed. When the user presses that, they go to another screen with a search bar fixed at the top. Whenever they activate the search bar and press the Search button on the keyboard, it issues a new query to Yelp. Note that this basically does away with filtering on both screens (although the latter is implicitly filtered by your query), but at least it's understandable.

Answer 1

Great question. I do not fully understand the "result list icon" thing. But imo, pressing a button to perform the actual search (call by HTTP) is more natural than changing the contents of the list without user actions. Clearness and control over least-number-of-taps.

Here is some inspiration. I call this pattern Filtering as Typing, Searching by Button, Awesome.

We made an app with a search box and a result list that is well received by all users. I paint three screen dumps in ASCII for you here:

App starts                 User types '2'               User presses (search) btn

[search box empty  ]       [2         (x)] (search)     [2          (x)] (cancel)
- "Recent" header -        - "Recent" header -          - "Search result" header -
Recent post 1              Recent post *2*              *Searching* spinner
Recent post 2
Recent post 3

Consider our Recent header as your Nearby header.

If your user renders the list empty by filtering, she will have easier to understand that she needs to press the Search button if you make that really obvious in that scenario. We did this by placing a big "Continue Search on Server" button when the list is filtered empty. Fool safe, and familiar from searching for emails in the Mail app of the iPhone.

(I am currently trying to find out how to combine suggestions with filtering in the searchbox)

If you still want it to start searching automatically, then a good start could be doing that once the list is rendered empty, instead of showing the Continue Search on Server button. To take it further, there are many examples of apps doing a really good job in displaying relevant search results as the user is typing. But combining that with your Nearby-list, I would not want to start on that end. I rather ship. :)

Hope this helps!