The final ribbon of standard interface chrome is the seek-and-you-shall-find search bar. If your app manages or accesses big collections of info, your audience will clamor for a way to search it. The search bar provides a standard interface for doing just that, offering a special text field with a magnifying glass icon to advertise its search savvy. The search field can include placeholder text ("Search" is a good choice) and a cancel button to clear text, and the optional bookmarks button can display user-saved content or search results. When you tap a search bar, the keyboard automatically slides into view. (For more details on these standard bits of text-field anatomy and behavior, see Fixing Typoz.)
The search bar fits right in with its cousins, the toolbar and navigation bar. All three are 44 pixels tall in portrait mode (but unlike the others, the search bar doesn't resize in landscape orientation). You can adjust the color and transparency for any or all of these toolbars (page 186). If you decide to go with something other than standard blue, be sure to color-coordinate all these toolbars so that they're at least in similar team colors.
While these options let you make your toolbars look good together, piling more than two of these toolbars (or a tab bar) into the same screen all at once turns into an interface traffic jam, as you've seen. When it comes to iPhone toolbars, three's a crowd. If your layout already has controls anchored to the top and bottom of the screen, don't keep the search bar permanently fixed onscreen, too. Instead, let it scroll with the rest of your content, and consider whether you even need to display it when you first land on a screen. You already saw this sleight of hand in the discussion of hidden panels in Chapter 3 (page 85): add the scroll bar to the top of your scrolling content area, but nudge it out of view when you first land on a screen, so that users have to scroll back up to see it. That keeps the search bar handy in the wings but lets your content take center stage.
Figure 5-14. Mail includes a search bar at the top of the mailbox. Tap the search bar (left), and it conjures the keyboard, a Cancel button, and in this case, a scope bar (circled) to choose which email field to search.
Beyond just a text field, the standard search bar comes with a few optional accessories. If your search requires some explanation, the standard search bar comes with options to add prompt text above the search field (just like a navigation bar, page 141). The search bar also has an optional scope bar that you can add immediately below the search field. The scope bar is the standard way to let people choose how to focus their search; it shows up along with the keyboard after you tap the search bar. In the Mail app, for example, the scope bar lets you choose which field to search (To, From, Subject, or entire messages).
Of course, giving people a search bar is only half the job; you also have to give 'em search results. The heavy lifting for your search is done behind the scenes by your code. If it's practical—and that's a big if—your app should offer live search, updating the list of search results every time you change the search term, letter by letter. This feature is a boon for slow-tapping typists, because it shows the search results as you go, often revealing your search result after typing just a few characters instead of waiting to tap out the whole word. Thing is, all those searches can be demanding if you're searching a big, big collection or a complex data structure, and it's almost always an incredibly slow crawl if the search goes out across the network for web searches. If you decide to go for it, test your live search on an actual device to make sure it holds up to stress testing. Better to drop live search altogether than to drag the app to a standstill. If you go without, never fear: most people won't give it a second thought and are content to type the full search phrase.
As for how to display the results, the standard route is to display them as a simple list, and you do that with a table view—hands down the iPhone's most versatile display element. The last chapter's discussion of tree-structure navigation whispered admiringly about table views a few times already. Time for a proper introduction.