Add note search

www/js/home.js

@@ -11,6 +11,14 @@ $(".view-main").on("ptr:refresh", ".ptr-content", function () {
     });
 });
 
+$(".view-main").on("input change", "#searchbar-input", function () {
+    window.shuffleInstance.filter(function (element) {
+        var searchtext = $("#searchbar-input").val().toLowerCase();
+        var notetext = $(".card-content", $(element)).text().toLowerCase();
+        return (notetext.indexOf(searchtext) !== -1);
+    });
+});
+
 function loadCards(callback) {
     // Do it twice as a workaround for the stupid sync issue
     NOTES.sync(function () {

www/js/main.js

@@ -10,7 +10,12 @@ var app = new Framework7({
     id: "com.netsyms.NotePostApp",
     init: true,
     initOnDeviceReady: false,
-    routes: routes
+    routes: routes,
+    on: {
+        searchbarSearch: function (sb, q) {
+            console.log(q);
+        }
+    }
 });
 
 var mainView = app.views.create('.view-main', {

www/pages/home.html

@@ -8,6 +8,10 @@
             <div class="title">NotePost</div>
 
             <div class="right">
+                <a class="link icon-only searchbar-enable" data-searchbar="#searchbar">
+                    <i class="icon f7-icons ios-only">search_strong</i>
+                    <i class="icon material-icons md-only">search</i>
+                </a>
                 <a href="#" class="link icon-only" onclick="app.ptr.refresh()">
                     <i class="material-icons">refresh</i>
                 </a>
@@ -15,6 +19,17 @@
                     <i class="material-icons">settings</i>
                 </a>
             </div>
+
+            <form class="searchbar searchbar-expandable searchbar-init" id="searchbar">
+                <div class="searchbar-inner">
+                    <div class="searchbar-input-wrap">
+                        <input type="search" placeholder="Search" id="searchbar-input"/>
+                        <i class="searchbar-icon"></i>
+                        <span class="input-clear-button"></span>
+                    </div>
+                    <span class="searchbar-disable-button">Cancel</span>
+                </div>
+            </form>
         </div>
     </div>