Add search box to list

www/assets/js/list.js

@@ -38,6 +38,17 @@ $(".view-main").on("swipeout:delete", "#addresslist .package-list-item", functio
     deletePackage($(this).data("packageid"));
 });
 
+var searchbar = app.searchbar.create({
+    el: '.package-list-searchbar',
+    searchContainer: '#addresslist',
+    searchIn: '.item-title',
+    on: {
+        search(sb, query, previousQuery) {
+            console.log(query, previousQuery);
+        }
+    }
+});
+
 /**
  * Update package distances relative to the passed coordinates.
  * @param {type} latitude

www/pages/list.html

@@ -14,6 +14,9 @@
             </div>
             <div class="title">Packages</div>
             <div class="right">
+                <a class="link icon-only searchbar-enable" data-searchbar=".package-list-searchbar">
+                    <i class="icon fas fa-search"></i>
+                </a>
                 <a class="link popover-open" data-popover="#popover-sort-list">
                     <i class="icon fas fa-sort-amount-down-alt"></i>
                 </a>
@@ -21,6 +24,16 @@
                     <i class="icon fas fa-trash"></i>
                 </a>
             </div>
+            <form class="searchbar searchbar-expandable package-list-searchbar">
+                <div class="searchbar-inner">
+                    <div class="searchbar-input-wrap">
+                        <input type="search" placeholder="Search"/>
+                        <i class="searchbar-icon"></i>
+                        <span class="input-clear-button"></span>
+                    </div>
+                    <span class="searchbar-disable-button">Cancel</span>
+                </div>
+            </form>
         </div>
     </div>
 

www/routes.js

@@ -37,6 +37,18 @@ var routes = [
         on: {
             pageAfterIn: function () {
                 loadPackageList();
+
+                var searchbar = app.searchbar.create({
+                    el: '.package-list-searchbar',
+                    searchContainer: '#addresslist',
+                    searchIn: '.item-title',
+                    backdrop: false,
+                    on: {
+                        search(sb, query, previousQuery) {
+                            console.log(query, previousQuery);
+                        }
+                    }
+                });
             }
         },
         keepAlive: true