Add search support

base.css

@@ -59,6 +59,11 @@ a:active {
     text-decoration: none;
 }
 
-figure a{
+figure a {
+    display: block;
+}
+
+#loadmore {
+    text-align: center;
     display: block;
 }
\ No newline at end of file

index.html

@@ -35,8 +35,11 @@
       </li>
     </ul>
   </nav>
-  <div class="feature-wrapper pt-5 pb-5 mt-0 mt-lg-0">
+  <div class="feature-wrapper pb-5 mt-0 mt-lg-0">
     <div class="container">
+      <div class="form-inline">
+        <input class="form-control col-sm-1 col-md-3 my-3" type="search" id="search-text" oninput="search()" placeholder="搜索">
+      </div>
       <div class="row" id="machine-list">
         <div id="base-cell" class="col-sm-12 col-md-3" style="display:none">
 
@@ -50,6 +53,9 @@
       </div>
     </div>
   </div>
+  <div>
+    <a id="loadmore" href="#" onclick="loadmore()">加载更多</a>
+  </div>
   <div style="display: none;">
     <img src="cart.gif">
   </div>

index.js

@@ -13,16 +13,20 @@ function getUrlVars() {
 
 function processJson(data) {
     machineList = data;
-    machineList = splitArrayByTime(machineList);
+    reorderedList = splitArrayByTime(machineList);
 
     var i, j, temparray, chunk = 32;
-    for (i = 0, j = machineList.length; i < j; i += chunk) {
-        temparray = machineList.slice(i, i + chunk);
+    for (i = 0, j = reorderedList.length; i < j; i += chunk) {
+        temparray = reorderedList.slice(i, i + chunk);
         pages.push(temparray);
     }
     showMachines(pages[loadedPage]);
 }
 
+function loadmore() {
+    showMachines(pages[loadedPage]);
+}
+
 function showMachines(machines) {
     var base = $("#base-cell");
     var machineListContainer = $("#machine-list");
@@ -44,11 +48,37 @@ function showMachines(machines) {
         clone.show();
         clone.attr("id", machine.id);
         clone.find("a").attr("href", playerlink);
-        clone.find("figcaption").text(title)
-        clone.find(".figure-img").attr("src", imageLink)
+        clone.find("figcaption").text(title);
+        clone.find(".figure-img").attr("src", imageLink);
+        clone.addClass("show-data");
         machineListContainer.append(clone);
     }
     loadedPage++;
+    if (loadedPage >= pages.length) {
+        $("#loadmore").hide();
+    }
+}
+
+function search() {
+
+    var keyword = $("#search-text").val();
+    if (!keyword || keyword.length == 0) {
+        $(".show-data").remove();
+        loadedPage = 0;
+        processJson(machineList);
+        return;
+    }
+    var searchResult = [];
+    for (i = 0; i < machineList.length; i++) {
+        var text = machineList[i].name + machineList[i].vendor;
+        if (text.includes(keyword)) {
+            searchResult.push(machineList[i]);
+        }
+    }
+    pages = [];
+    loadedPage = 0;
+    $(".show-data").remove();
+    showMachines(searchResult);
 }
 
 function splitArrayByTime(someArray) {