Search attempt

ionic/components/search-bar/search-bar.js

@@ -1,4 +1,4 @@
-import {ElementRef} from 'angular2/angular2'
+import {ElementRef, Pipe} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {IonicComponent} from 'ionic/config/component'
@@ -8,7 +8,9 @@ import {IonicComponent} from 'ionic/config/component'
   selector: 'ion-search-bar',
   properties: {
     cancelText: 'cancel-text',
-    placeholderText: 'placeholder-text'
+    placeholderText: 'placeholder-text',
+    list: 'list',
+    query: 'query'
   }
 })
 @View({
@@ -23,6 +25,32 @@ export class SearchBar {
   ) {
     this.domElement = elementRef.domElement
     this.config = SearchBar.config.invoke(this)
+    setTimeout(() => {
+      console.log('Search bar for list', this.list);
+      this.query = 'Cats';
+    })
+  }
+}
+
+export class SearchPipe extends Pipe {
+  constructor() {
+    super();
+    this.state = 0;
+  }
+
+  supports(newValue) {
+    return true;
+  }
+
+  transform(value) {
+    console.log('Transforming', value);
+    return value;
+    //return `${value} state:${this.state ++}`;
+  }
+
+  create(cdRef) {
+    console.log('REF', cdRef);
+    return new SearchPipe(cdRef);
   }
 }
 

ionic/components/search-bar/test/basic/index.js

@@ -1,24 +1,50 @@
-import {bootstrap} from 'angular2/angular2'
+import {bootstrap, For} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
+import { bind } from 'angular2/di';
+import { PipeRegistry } from 'angular2/change_detection';
+
 import {Content} from 'ionic/components/content/content';
 import {List} from 'ionic/components/list/list';
+import {Item} from 'ionic/components/item/item';
 import {SearchBar} from 'ionic/components/search-bar/search-bar';
+import {SearchPipe} from 'ionic/components/search-bar/search-bar';
 
+function randomTitle() {
+  var items = ['Pizza', 'Pumpkin', 'Apple', 'Bologna'];
+  return items[Math.floor(Math.random() * items.length)];
+}
 
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, List, SearchBar]
+  directives: [Content, List, Item, SearchBar, For]
 })
 class IonicApp {
   constructor() {
     console.log('IonicApp Start')
+
+    this.query = '';
+
+    this.items = []
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: randomTitle()
+      })
+    }
   }
 }
 
+import { defaultPipes } from 'angular2/change_detection';
+export var pipes = Object.assign({}, defaultPipes, {
+  'search': [
+    new SearchPipe()
+  ]
+});
 
 export function main() {
-  bootstrap(IonicApp);
+  bootstrap(IonicApp, [
+    bind(PipeRegistry).toValue(new PipeRegistry(pipes))
+  ]);
 }

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

@@ -3,34 +3,13 @@
 
   <ion-content>
 
-    <ion-search-bar></ion-search-bar>
+    <ion-search-bar [query]="query" [list]="list"></ion-search-bar>
 
-    <ion-list>
-
-      <div class="item">
-        <div class="item-content">
-          <div class="item-title">
-            Item
-          </div>
-        </div>
-      </div>
-
-      <div class="item">
-        <div class="item-content">
-          <div class="item-title">
-            Item
-          </div>
-        </div>
-      </div>
-
-      <div class="item">
-        <div class="item-content">
-          <div class="item-title">
-            Item
-          </div>
-        </div>
-      </div>
+    <ion-list #list>
 
+      <ion-item *for="#item of items | search:query">
+        {{item.title}}
+      </ion-item>
     </ion-list>
 
   </ion-content>