SearchBar

ionic/components/search-bar/test/model/index.ts

@@ -0,0 +1,43 @@
+import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
+
+import {App} from 'ionic/ionic';
+import {SearchPipe} from 'ionic/components/search-bar/search-bar';
+
+
+function randomTitle() {
+  var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf'];
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+@App({
+  templateUrl: 'main.html',
+  bindings: [NgControl],
+  directives: [FORM_DIRECTIVES]
+})
+class IonicApp {
+  constructor() {
+    var fb = new FormBuilder();
+
+    this.searchQuery = '';
+
+    this.items = []
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: randomTitle()
+      })
+    }
+  }
+
+  getItems() {
+    var q = this.searchQuery;
+    if(q.trim() == '') {
+      return this.items;
+    }
+    return this.items.filter((v) => {
+      if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
+        return true;
+      }
+      return false;
+    })
+  }
+}

ionic/components/search-bar/test/model/main.html

@@ -0,0 +1,16 @@
+
+<!-- <ion-view nav-title="Search Bar"> -->
+
+  <ion-content>
+    <form [ng-form-model]="form">
+
+      <ion-search-bar [(ng-model)]="searchQuery"></ion-search-bar>
+      <ion-list inset #list>
+        <ion-item *ng-for="#item of getItems()">
+          {{item.title}}
+        </ion-item>
+      </ion-list>
+    </form>
+  </ion-content>
+
+<!-- </ion-view> -->