added collections search

frontend/js/templates/collectionsView.ejs

@@ -1,7 +1,7 @@
 <ul class="thumbnails2">
   <div id="transparentHeader">
     <div id="transparentPlaceholder">
-      <input type="text" class="searchInput" placeholder="Search..."><img id="searchSubmit" width="16" height="16" src="/_admin/html/img/enter_icon.png">
+      <input type="text" id="searchInput" class="searchInput" placeholder="Search..."><img id="searchSubmit" width="16" height="16" src="/_admin/html/img/enter_icon.png">
 
       <a href="#new">
         <img id="plusIcon" src="/_admin/html/img/plus_icon.png"class="pull-right"></img>

frontend/js/views/collectionsView.js

@@ -1,6 +1,8 @@
 var collectionsView = Backbone.View.extend({
   el: '#content',
   el2: '.thumbnails',
+  searchPhrase: '',
+
   init: function () {
   },
 
@@ -9,15 +11,40 @@ var collectionsView = Backbone.View.extend({
   render: function() {
     $(this.el).html(this.template.text);
 
+    var searchPhrase = this.searchPhrase.toLowerCase();
+
     this.collection.each(function (arango_collection) {
+      if (searchPhrase !== '' && arango_collection.get('name').toLowerCase().indexOf(searchPhrase) === -1) {
+        return;
+      }
+
       $('.thumbnails', this.el).append(new window.CollectionListItemView({model: arango_collection}).render().el);
     }, this);
 
+    $('#searchInput').val(this.searchPhrase);
+    $('#searchInput').focus();
+
     return this;
   },
   events: {
-    "click .icon-info-sign" : "details"
+    "click .icon-info-sign" : "details",
+    "blur #searchInput" : "restrictToSearchPhrase",
+    "keypress #searchInput" : "restrictToSearchPhraseKey",
+    "click #searchSubmit" : "restrictToSearchPhrase"
   },
+
+  restrictToSearchPhraseKey: function(e) {
+    if (e.keyCode == 13) {
+      this.searchPhrase = $('#searchInput').val().replace(/(^\s+|\s+$)/g, '');
+      this.render();
+    }
+  },
+  
+  restrictToSearchPhrase: function() {
+    this.searchPhrase = $('#searchInput').val().replace(/(^\s+|\s+$)/g, '');
+    this.render();
+  },
+
   details: function() {
   }