Added javascript real time search in collection list

amiibofindr/static/app/collectionSearch.js

@@ -0,0 +1,55 @@
+(function() {
+    var CollectionSearchComponent = function() {
+       this.initialize();
+    };
+
+    CollectionSearchComponent.prototype.initialize = function() {
+        var self = this;
+
+        // Required DOM
+        this.$searchInput = document.querySelector('[data-component="collectionSearchInput"]');
+        this.$collectionList = document.querySelector('[data-component="collectionList"]').children;
+
+        // Add event handlers
+        this.$searchInput.addEventListener('keyup', function(event) {
+            self.search(self.$searchInput.value);
+        });
+
+        // Focus search input
+        this.$searchInput.focus();
+    };
+
+    CollectionSearchComponent.prototype.showItem = function(item) {
+        item.style.display = 'block';
+    };
+
+    CollectionSearchComponent.prototype.hideItem = function(item) {
+        item.style.display = 'none';
+    };
+
+    CollectionSearchComponent.prototype.reset = function() {
+        for (var index = 0; index < this.$collectionList.length; index++) {
+            var item = this.$collectionList[index];
+            this.showItem(item);
+        }
+    };
+
+    CollectionSearchComponent.prototype.search = function(searchQuery) {
+        if (!searchQuery || searchQuery === null || searchQuery === '') {
+            this.reset();
+            return false;
+        }
+
+        for (var index = 0; index < this.$collectionList.length; index++) {
+            var item = this.$collectionList[index];
+            var names = item.getAttribute('data-amiibo-names');
+            if (names.indexOf(searchQuery.toLowerCase()) === -1) {
+                this.hideItem(item);
+            } else {
+                this.showItem(item);
+            }
+        }
+    };
+
+    SimpleViews.register('collection-search', CollectionSearchComponent);
+})();

amiibofindr/templates/amiibo/collection.html

@@ -19,17 +19,19 @@
   {% endif %}
 {% endblock %}
 
+{% block js_views %}collection-search{% endblock %}
+
 {% block main_content %}
   <div class="ui page grid">
     <div class="sixteen wide column">
       {% if selected_collection.name %}<h1>{{ selected_collection.name }}</h1>{% endif %}
       <div class="ui icon big fluid input">
-        <input type="text" placeholder="Search...">
+        <input type="text" placeholder="Search..." data-component="collectionSearchInput">
         <i class="inverted circular search link icon"></i>
       </div>
     </div>
     <div class="sixteen wide column">
-      <div class="ui six doubling cards" data-amiibo-list>
+      <div class="ui six doubling cards" data-component="collectionList">
         {% for amiibo in amiibo_list %}
           {% include "amiibo/widgets/amiibo-card.html" with amiibo=amiibo only %}
         {% endfor %}

amiibofindr/templates/amiibo/widgets/amiibo-card.html

@@ -1,5 +1,5 @@
 {% load staticfiles thumbnail %}
-<div class="special card" data-amiibo-name="{{ amiibo.get_all_names }}">
+<div class="special card" data-amiibo-names="{{ amiibo.get_all_names|lower }}">
   <div class="dimmable image">
     <div class="ui dimmer">
       <div class="content">

gulpfile.js

@@ -13,6 +13,7 @@ gulp.task('scripts', function() {
       'amiibofindr/static/app/simpleViews.js',
       'amiibofindr/static/app/global.js',
       'amiibofindr/static/app/money.js',
+      'amiibofindr/static/app/collectionSearch.js',
       'amiibofindr/static/app/time.js'
     ])
     .pipe(concat('app.js'))