Add search wow

simonpai · Apr 19, 2014 · 4227cb2 · 4227cb2
1 parent fb6d453
commit 4227cb2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/js/pesticide.js b/js/pesticide.js
@@ -27,6 +27,7 @@ function createTableStructure(data) {
 }
 
 function appendData(data) {
+  $("#pesticide-table").data("data", data)
   tbody = table.find("tbody")
   tbody.html("")
 
@@ -40,7 +41,8 @@ function appendData(data) {
 }
 
 function sortData(key, direction) {
-  data = data.sort(function(a, b) {
+  dataToSort = $("#pesticide-table").data('data')
+  dataToSort = dataToSort.sort(function(a, b) {
     a = a[key].length == 0 ? "0" : a[key]
     b = b[key].length == 0 ? "0" : b[key]
     if(parseInt(a) || parseInt(b)) {
@@ -51,7 +53,7 @@ function sortData(key, direction) {
       return r ? -1 : 1
     }
   })
-  appendData(data)
+  appendData(dataToSort)
 }
 
 $(document).on("click", ".js-sort", function() {
@@ -61,6 +63,20 @@ $(document).on("click", ".js-sort", function() {
   false
 })
 
+$(document).on("search", ".js-search", function() {
+  query = $(this).val()
+  if(query.length) {
+    queryData = data.filter(function(obj) {
+      string = Object.keys(obj).map(function(k) { return obj[k] }).join()
+      return string.match(new RegExp(query, "i"))
+    })
+  } else {
+    queryData = data
+  }
+  appendData(queryData)
+  false
+})
+
 function processData(data) {
   data = data.map(function(obj, i) {
     val = obj["施藥方法"]

diff --git a/pesticide.html b/pesticide.html
@@ -10,8 +10,8 @@
 </head>
   <body>
     <h1 class="title">查詢藥劑使用方式</h1>
-    <form id="search-table">
-      <input type="search" />
+    <form>
+      <input type="search" class="js-search" />
     </form>
     <div id="pesticide">
       <table class="table" id="pesticide-table"></table>