Search Box

becauseofhope · May 27, 2017 · 559d30e · 559d30e
1 parent 0006eb5
commit 559d30e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/FaceBlockGrid.vue b/src/components/FaceBlockGrid.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
+    <input v-model="search" placeholder="Search">
     <div class="row small-up-2 medium-up-3 large-up-3 grid">
-      <div v-for="face in faces" class="column column-block">
+      <div v-for="face in facesSearch" class="column column-block">
         <face :face="face" :title-description="titleDescription"/>
       </div>
     </div>

diff --git a/src/components/faceBlockGrid_script.ts b/src/components/faceBlockGrid_script.ts
@@ -13,4 +13,17 @@ import { Face as FaceData } from '../data/face';
 })
 export default class FaceBlockGrid extends Vue {
   faces: FaceData[];
+  search = "";
+
+  get facesSearch() {
+    if (this.search.length > 0) {
+      return this.faces.filter(
+        (face) => {
+          return face.description.toLowerCase().indexOf(this.search.toLowerCase()) >= 0
+        }
+      );
+    } else {
+      return this.faces;
+    }
+  }
 };