The Kids In Touch app is coming along nicely right now. Creating a near native experience has been quite a struggle. Fortunately, almost all of the heavy lifting is done for me by the Ionic Framework and AngularJS.

When a user wants to send a message to a friend, the app displays a list of ALL their friends. Without a bit of magic, the user will need to scroll through the list to find the right person. With a big list of friends, that could ugly. Here's a sample:

![](/content/images/2014/Jan/NoSearchBar.PNG)

Fortunately, Ionic has a simple subheader class that can be put right under a header. The subheader combined with Angular's filter capabilities, make it easy to show only the friend's you are searching for. (There's a Star Wars joke in there.)

<view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">

    <div class="bar bar-subheader item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" placeholder="Search" ng-model="mc.filterName" autocorrect="off">
            <button class="button button-clear icon ion-close" ng-click="mc.filterName = ''">
            </button>
        </label>
    </div>

    <content has-header="true" has-subheader="true" padding="true">

        <div summary-friend ng-repeat="friend in mc.summaryFriends | filter: filterNames" ng-click=""></div>

    </content>

</view>

Like this :

![](/content/images/2014/Jan/EmptySearchBar.PNG)
![](/content/images/2014/Jan/FilteredSearch.PNG)