Search header

Is there any way to create a similar UI to the facebook and twitter search bar when using the <ion-nav-bar>?

I have seen that there is css for header inputs but I cant work out how to use this with the <ion-nav-bar> but only on certain pages?

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  <button class="button button-clear">

I want to have a search button in the top right which is simple enough, but then when it is clicked, the nav title and buttons are replaced with a search input. Then when this loses focus or is cancelled, the nav bar is returned to the original state.


Try the docs:

@sjerd That’s exactly the code block I copied into the post haha.

I have almost got it working now, an old codepen which helped and now creating my own directive for it

@mbrookson exactly what I’m looking for, did you end up with a solution / codepen?

@lefnire Hey, yeah did in the end but it’s pretty ugly!

I just added an input to the header and then used a pretty ‘hacky’ way to pass much model to the list filter in the main view using the $parent scope…

    <header-search search-text="$"></header-search>

    <ion-list class="list-alternate" ng-style="{height: containerHeight}">
    	<ion-item ng-repeat="subject in subjects |  filter:{displayValue: search.text}" >

Then I just had a cancel() and blur() functions in the directive which clear the input and model, and scroll to the top of my list when blurred

Any chance any of you have added google autocomplete to your ion-nav-title search bar? Using Google Maps Javascript API I can’t get autocomplete to bind to the input field based on its id. If I put the search bar in <ion-content> it works fine, but in the ion-nav-title bar its like it can’t see the element ID.

var input = ( document.getElementById('searchCity') ) ;
var autocomplete = new google.maps.places.Autocomplete(input) ;

In my HTML:

   <input type="text" id="searchCity" ng-model="$parent.searchInfo.searchCity" ng-change="disableTap('searchCity')">

The above returns an error with Google: InvalidValueError: not an instance of HTMLInput Element
If I move the above input code to the ion-content section, it all works fine.

Actually. I figured it out, the DOM was loading to fast so I needed to delay the autocomplete binding to the input element ID in the controller:

setTimeout( function() {
  var autocomplete = new google.maps.places.Autocomplete(input) ;
},1000 ) ;

Not the cleanest but it works.

What about adding a function? $parent.someFunction() doesn’t work.

$scope.someFunction = function(id) {

$scope.funcs = {
    thisFunction : $scope.someFunction(id),
    thatFunction : $scope.otherFunction()

And then in HTML: ng-click="funcs.thisFunction(1);" ???