From 559d30ec7abd74a015d9abf6e4e9fc5882ca4554 Mon Sep 17 00:00:00 2001
From: Nelson Chen <crazysim@gmail.com>
Date: Fri, 26 May 2017 08:46:08 -0700
Subject: [PATCH 1/2] Search Box

---
 src/components/FaceBlockGrid.vue       |  3 ++-
 src/components/faceBlockGrid_script.ts | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/FaceBlockGrid.vue b/src/components/FaceBlockGrid.vue
index caf7630..a346757 100644
--- 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
index ea305ca..621c6b5 100644
--- 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;
+    }
+  }
 };

From 4a65fff98f1749a7fbafa0dc85d5ef53f774d088 Mon Sep 17 00:00:00 2001
From: Nelson Chen <crazysim@gmail.com>
Date: Sat, 27 May 2017 13:52:47 -0700
Subject: [PATCH 2/2] By title, not description

---
 src/components/faceBlockGrid_script.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/faceBlockGrid_script.ts b/src/components/faceBlockGrid_script.ts
index 621c6b5..ba8450d 100644
--- a/src/components/faceBlockGrid_script.ts
+++ b/src/components/faceBlockGrid_script.ts
@@ -19,7 +19,7 @@ export default class FaceBlockGrid extends Vue {
     if (this.search.length > 0) {
       return this.faces.filter(
         (face) => {
-          return face.description.toLowerCase().indexOf(this.search.toLowerCase()) >= 0
+          return face.title.toLowerCase().indexOf(this.search.toLowerCase()) >= 0
         }
       );
     } else {