Please wait...

Create search bar like native android in ionic 1

@ionic  @ android  @ search   @ bar  @ filter  

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/">
<script src="lib/ionic-filter-bar/dist/"></script>

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

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

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

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

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 = ${

        items: $scope.items,

        update: function (filteredItems, filterText) {

          $scope.items = filteredItems;

          if (filterText) {

          $ = filterText;






    $scope.postArray = [




    'message':'ionic good!',






    'message':'ionic good!',






    'message':'ionic good!',






    'message':'ionic good!',






    'message':'ionic good!',






    'message':'ionic good!',






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"/>

Build and Run command

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

Github link:

See demo:

thank you

Comments 0