From df78f7662cad469de89137d34d17bac2de325e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felipe=20Mart=C3=ADn?= <fmartingr@gmail.com>
Date: Thu, 27 Aug 2015 19:36:56 +0200
Subject: [PATCH] Search can now be reset via cross button

---
 amiibofindr/static/app/collectionSearch.js   | 7 +++++++
 amiibofindr/templates/amiibo/collection.html | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/amiibofindr/static/app/collectionSearch.js b/amiibofindr/static/app/collectionSearch.js
index a5e9daf..c8070e3 100644
--- a/amiibofindr/static/app/collectionSearch.js
+++ b/amiibofindr/static/app/collectionSearch.js
@@ -8,6 +8,7 @@
 
         // Required DOM
         this.$searchInput = document.querySelector('[data-component="collectionSearchInput"]');
+        this.$resetButton = document.querySelector('[data-component="collectionSearchReset"]');
         this.$collectionList = document.querySelector('[data-component="collectionList"]').children;
 
         // Add event handlers
@@ -15,6 +16,10 @@
             self.search(self.$searchInput.value);
         });
 
+        this.$resetButton.addEventListener('click', function(event) {
+            self.reset();
+        });
+
         // Focus search input
         this.$searchInput.focus();
     };
@@ -28,6 +33,8 @@
     };
 
     CollectionSearchComponent.prototype.reset = function() {
+        this.$searchInput.value = '';
+
         for (var index = 0; index < this.$collectionList.length; index++) {
             var item = this.$collectionList[index];
             this.showItem(item);
diff --git a/amiibofindr/templates/amiibo/collection.html b/amiibofindr/templates/amiibo/collection.html
index 9ec8d20..3ff846c 100644
--- a/amiibofindr/templates/amiibo/collection.html
+++ b/amiibofindr/templates/amiibo/collection.html
@@ -27,7 +27,7 @@
       {% if selected_collection.name %}<h1>{{ selected_collection.name }}</h1>{% endif %}
       <div class="ui icon big fluid input">
         <input type="text" placeholder="Search..." data-component="collectionSearchInput">
-        <i class="inverted circular search link icon"></i>
+        <i class="inverted circular cancel link icon" data-component="collectionSearchReset"></i>
       </div>
     </div>
     <div class="sixteen wide column">