add input delay

layouts/blog/list.html

@@ -118,8 +118,18 @@
         document.getElementById("articleList").innerHTML = matchContent;
       }
 
+      // 增加延遲(待輸入完成後再進行搜尋)
+      function delay(fn, ms) {
+        let timer = 0
+        return function (...args) {
+          clearTimeout(timer)
+          timer = setTimeout(fn.bind(this, ...args), ms || 0)
+        }
+      }
+
       // 搜尋
-      document.getElementById('blog_search').addEventListener("keyup", event => {
+      $('#blog_search').keyup(delay(function (e) {
+        console.log('Time elapsed!', this.value);
         // 取得輸入框的值
         let inputVal = $('#blog_search').val();
         matchContent = "";
@@ -127,9 +137,9 @@
           // 搜尋特定分類文章
           // if (item.categories) {
           //   if (item.categories.includes(category)) {
-              // 搜尋所有分類文章
-              if (item.title.includes(inputVal) || item.description.includes(inputVal) || item.content.includes(inputVal)) {
-                matchContent += `
+          // 搜尋所有分類文章
+          if (item.title.includes(inputVal) || item.description.includes(inputVal) || item.content.includes(inputVal)) {
+            matchContent += `
                 <div class="article-item">
                   <a href="${item.url}">
                     <img src="${item.image}" alt="">
@@ -144,12 +154,12 @@
                     </a>
                   </div>
                 </div>`
-              }
+          }
           //   }
           // }
         })
         document.getElementById("articleList").innerHTML = matchContent;
-      });
+      }, 500));
     }
   </script>