Create search bar in ionic version 1. they look like native  search bar with animation

Create a project run this command:

ionic start <project name> blank --type ionic1

then move into the newly created directory:

cd <project name>

Install required js and CSS file

bower install ionic-filter-bar

Link js and CSS file in index.html

<link rel="stylesheet" href="lib/ionic-filter-bar/dist/ionic.filter.bar.css">
<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>

Open app.js in www ->js-> app.js and add the module of js file

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'jett.ionic.filter.bar'])

Open home.html in www ->Templates-> home.html and add code

<ion-view view-title="Dashboard">
  <ion-header-bar>
      <div class="h1 title">Search bar</div>
      <button class="button button-icon button-clear button-positive ion-android-search" ng-click="showFilterBar()">
                </button>
  </ion-header-bar>
  <ion-content class="padding">
      <div class="card">
        <a class="item item-thumbnail-left" ng-repeat="post in postArray">
          <img src="{{post.image}}">
          <h2>{{post.name}}</h2>
          <p>{{post.message}}</p>
        </a>
      </div>
  </ion-content>
</ion-view>

Open controllers.js in www ->js-> controllers.js and add code

angular.module('starter.controllers', [])

.controller('HomeCtrl', function($scope, $rootScope, $ionicFilterBar) {

$rootScope.showFilterBar = function () {

      filterBarInstance = $ionicFilterBar.show({

        items: $scope.items,

        update: function (filteredItems, filterText) {

          $scope.items = filteredItems;

          if (filterText) {

          $scope.search = filterText;

            console.log(filterText);

          }

        }

      });

    };


    $scope.postArray = [

    {

    'id':0,

    'name':'adam',

    'message':'ionic good!',

    'image':'img/adam.jpg'

    },

    {

    'id':1,

    'name':'ben',

    'message':'ionic good!',

    'image':'img/ben.png'

    },

    {

    'id':2,

    'name':'ionic',

    'message':'ionic good!',

    'image':'img/ionic.png'

    },

    {

    'id':3,

    'name':'Max',

    'message':'ionic good!',

    'image':'img/max.png'

    },

    {

    'id':4,

    'name':'Mike',

    'message':'ionic good!',

    'image':'img/mike.png'

    },

    {

    'id':0,

    'name':'Perry',

    'message':'ionic good!',

    'image':'img/perry.png'

    }

    ]

})

Search bar like android application code is done you add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Create ios build add code in config.xml file 

<platform name="ios">
    <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
</platform>

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link: https://github.com/Sudarshan101/searchbarionic1

See demo: https://www.youtube.com/watch?v=Yhx6KhIBymM

thank you