Newbie search input in header

ionic-v1
1

Hello,

I’ve just started with Ionic - it’s awesome but I’ve run into some snags.

I am building on top of the sample tabs application generated from the command:

ionic start myApp tabs

I’m trying to get a search bar into the header of my pages. Rather like the exmaple given here:

However I’m not getting any success and am basically unsure where I should but the CSS info into my code which looks like the following. I’ve had a look around these forums and online but can’t find anything similar. I would be extremely grateful for any help or advice anyone might be able give. With many thanks in advance here is some code from the application:

<ion-view view-title="Home">
  <ion-content class="padding">
  <div class="list card">
  <a class="item item-divider item-icon-left">
    <i class="icon ion-email"></i>
    Email Subject
    <span class="item-note">
      John Abbott
    </span>
	<a class="item item-text-wrap">
here is the the first few lines of text from the email body
  </a>  
  </a>
  </div>
...

Thanks again,

John

2

Are you using the ion-nav-bar? Do you want it on one view or every view?

Here is a post on putting inputs into the navigation bar:

It will be hacky to have a search bar take up the entire ion-nav-bar since you will have to override any navigation. Here’s a post where the search is just in the title:

I also recommend you check out this ion-filter-bar that @djett created, it’s a little more advanced, but it adds a search bar with animation:

1 Like
3

Hi @brandyshea ,

Thanks so much for the reply, it’s really very kind. I feel silly for not finding those examples previously. I’m not using ion-nav-bar and I do want the search to appear on every page.

I have a tabbed application and have the following in my tabs.html page:

 <!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
  
  <!-- People Tab -->
  <ion-tab title="People" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/people">
    <ion-nav-view name="tab-people"></ion-nav-view>
  </ion-tab>
...

I’m not sure where I would start putting the ion-nav-bar code into the app? Again my apologies for the newbie questions I’m just starting out on my first app.

Thanks

John

4

Sorry I’m being super dumb - just realised nav-bar was in my index.html page. Apologies.

1 Like
5

Not dumb at all! Here is a post on understanding the tab structure, you may find it helpful: https://blog.nraboy.com/2014/12/understanding-tabs-ionic-framework/

Feel free to ask any questions if you don’t understand something. :smile: