Improve our Accounts List - MobileCaddy DevelopersMobileCaddy Developers

In this module you will improve upon the current accounts list by adding an inline search function.

Step 1 : Inline Search

Update the www/templates/accounts.html so it looks like this. Note the highlighted lines. We are adding a search box to the top of our page and binding it to the vm.search.query variable. This value is then used to filter the output of our collection-repeat.

Here we have also added a button for clearing the search… we will hook that up later on in this section.


<ion-view title="Accounts">

  <!-- Output a connectivity/sync-icon in the top right of our navigation bar -->
  <ion-nav-buttons side="right">
    <mc-sync-spinner></mc-sync-spinner>
  </ion-nav-buttons>

  <ion-content>

    <div class="item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="vm.search.query">
      </label>
      <button class="button button-clear icon ion-close-round" ng-click="vm.clearSearch()"></button>
    </div>

    <ion-list>

      <ion-item class="item"
        collection-repeat="account in vm.accounts | filter:vm.search.query" type="item-text-wrap"
        >
        <h3>{{account.Name}}</h3>
      </ion-item>

    </ion-list>

  </ion-content>
</ion-view>

<ion-view title="Accounts">

<ion-nav-buttons side="right">

<mc-sync-spinner></mc-sync-spinner>

</ion-nav-buttons>

<ion-content>

</label>

</div>

<ion-list>

<ion-item class="item"

collection-repeat="account in vm.accounts | filter:vm.search.query" type="item-text-wrap"

<h3>{{account.Name}}</h3>

</ion-item>

</ion-list>

</ion-content>

</ion-view>

Step 2 : Clear the search box

Add the following highlighted lines near the top of our AccountsCtrl. This sets up a vm.search object and also exposes a clearSearch function that our template above calls when a user clicks on the cross to clear their search input


    var vm     = this,
        logTag = "AccountsCtrl";

    vm.search = {};

    // exposed functions
    vm.clearSearch = clearSearch;


    activate();

var vm = this,

logTag = "AccountsCtrl";

vm.search = {};

// exposed functions

vm.clearSearch = clearSearch;

activate();

Further down the AccountsCtrl add a new clearSearch function as follows. This is setting our vm.search.query variable to an empty string, and it is this variable that our input box in our template is bound too.


    /**
     * @functionclearSearch
     * @description clears search box
     */
    function clearSearch () {
      vm.search.query = "";
    }

/**

* @functionclearSearch

* @description clears search box

function clearSearch () {

vm.search.query = "";

}

Step 1 : Inline Search

Step 2 : Clear the search box

Want to get building?