angular.js - ionic tabs template how to display the search box in the header

Question

New to ionic, I use the inoic tabs template.
When making a search interface, I want to display the search box in the header. How to operate?

I set the attribute hide-nav-bar="false" in the <ion-view> of the search interface,
and added <ion-nav-bar> to display the search header.
There are two problems with this operation. One is that <ion-content> is at the top and covered by the new <ion-nav-bar>.
The other problem is that when it is just refreshed, The original <ion-nav-bar> is displayed, then hidden, and then the new <ion-nav-bar> is displayed.

I want to display the search box in the header. What is the correct way to do it?

The description may not be clear, so sorry.

---

Added a question,
index page

    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

How to replace <ion-nav-bar>

on other pages

Answer 1

<ion-view>

<ion-nav-title>
    <ion-header-bar class="item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search" ng-model="searchContent">
        </label>
        <button class="button button-clear">
            取消
        </button>
    </ion-header-bar>
</ion-nav-title>
<ion-content>
    <ion-list>
        <ion-item class="item-pider">
            搜索历史
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
    </ion-list>
</ion-content>

</ion-view>