Best way to achieve search box in header

[mattwoolnough]

I’m trying to create a search box in the header like the twitter app presents. This can be seen in the examples below.

All the examples I have seen, bar one have this type of interface, where the searchbox is contained in a sub bar.

The exception I mentioned earlier can be seen here: http://codepen.io/bgrossi/pen/JtvsL
and uses an angular directive to achieve the desired outcome. Unfortunately this isn’t compatible with latest versions of Ionics, but presumably it wouldn’t take too much to fix.

I’d like to know if this is the best way to solve the problem.

thanks,

Matthew

[ysrael]

<ion-view>
     <ion-nav-buttons side="left" >
        <div class="bar bar-header item-input-inset" ng-if="hasFilters">
            <label class="item-input-wrapper textbox-search">
                <i class="icon ion-ios7-search placeholder-icon"></i>
                <input type="search" placeholder="Search">
            </label>

        </div>
    </ion-nav-buttons>
    <ion-nav-title ng-show="!hasFilters">
        Users
    </ion-nav-title>
    <ion-nav-buttons side="right">

        <a data-tap-disabled="true" class=" button button-icon icon positive" ng-click="openFilters(hasFilters);" ng-class="{'ion-search':!hasFilters,'ion-close-circled':hasFilters}"></a>
    </ion-nav-buttons>

[mattwoolnough]

That’s pretty tidy! many thanks.

[mrameezraja]

you can try this

Search on ionNavBar. New component contribution to ionic

[mattwoolnough]

thanks mrameezraja,

I had linked to that project in my OP. That particular solution is only compatible with IOS8 & Android 4.4. it also wasn’t working with latest ionic release for some reason.
The code ysrael put forward seems to work well enough for my requirements - at first glance at least!

Regards,

[alonline]

The easiest way i have found is just replacing the existing header bar by adding hide-nav-bar=“true” and creating a new one of your own
<ion-view class="perks-feed-view" hide-back-button="true" hide-nav-bar="true"> <ion-header-bar class="bar-dark bar bar-header"> <div class="buttons buttons-left header-item"> <span class="left-buttons"> <button class="button button-icon button-clear ion-ios-drag" menu-toggle="left"> </button> </span> </div> <div class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="Search Business"> </label> <span class="button button-small" ng-click="filterFeed()"> <i class="icon ion-search placeholder-icon"></i> </span> <span class="button button-small" ng-click="filterFeed()"> <i class="icon ion-ios-albums-outline placeholder-icon"></i> </span> </div> </ion-header-bar> <ion-content>

[balakrishna16]

Hi, I tried the code in my application… Everything’s working fine. But the search icon isn’t displaying in iOS, however for android its working fine. Please any suggestions.

[balakrishna16]

Got it… Need to replace the icon name from ‘ion-ios7-search’ to ‘ion-ios-search’ in the directive function.

[Amila86]

I hope following link would help you a much.

Search-bar





[vinayakkulkarni]

Best one so far!

djett41/ionic-filter-bar

[yasirpanjsheri]

hi , i want something like this in Ionic 2, a search button in the header that expands when clicked , any ideas ?

[Sachin0011]

You can try this as well

https://www.tutorialsplane.com/ionic-header/

Header functionality is completely available there

[fvukovic1]

ysrael ty man, u saved me <3

[damstra_apps]

The art of simplicity. Thank you so much :))

[raj-prashanth]

thanks it woks perfectly! but i cant change the icons size and weight! how to change the icon size and weight? thanks.