perf: optimize local search

layout/_partial/local-search.ejs

@@ -1,8 +1,8 @@
 <div class="search-pop-overlay">
     <div class="popup search-popup">
         <div class="search-header">
-          <span class="search-icon">
+          <span class="search-input-field-pre">
-            <i class="fas fa-search"></i>
+            <i class="fas fa-keyboard"></i>
           </span>
             <div class="search-input-container">
                 <input autocomplete="off"

source/css/layout/_partial/local-search.styl

@@ -37,14 +37,15 @@ $icon-size = 1.2rem;
       display: flex;
       padding: 10px;
 
-      .search-icon, .popup-btn-close {
+      .search-input-field-pre, .popup-btn-close {
         font-size: $icon-size;
         padding: 0 10px;
         display: flex;
         align-items: center;
       }
 
-      .search-icon {
+      .search-input-field-pre {
+        cursor: pointer;
         color: var(--third-text-color);
       }
 

source/js/local-search.js

@@ -17,24 +17,9 @@ KEEP.initLocalSearch = () => {
   } else if (searchPath.endsWith('json')) {
     isXml = false;
   }
-  const input = document.querySelector('.search-input');
+  const searchInputDom = document.querySelector('.search-input');
   const resultContent = document.getElementById('search-result');
 
-  // Ref: https://github.com/ForbesLindesay/unescape-html
-  const unescapeHtml = html => {
-    return String(html)
-      .replace(/"/g, '"')
-      .replace(/'/g, '\'')
-      .replace(/:/g, ':')
-      // Replace all the other &#x; chars
-      .replace(/&#(\d+);/g, (m, p) => {
-        return String.fromCharCode(p);
-      })
-      .replace(/&lt;/g, '<')
-      .replace(/&gt;/g, '>')
-      .replace(/&amp;/g, '&');
-  };
-
   const getIndexByWord = (word, text, caseSensitive) => {
     let wordLen = word.length;
     if (wordLen === 0) return [];
@@ -105,7 +90,7 @@ KEEP.initLocalSearch = () => {
 
   const inputEventFunction = () => {
     if (!isfetched) return;
-    let searchText = input.value.trim().toLowerCase();
+    let searchText = searchInputDom.value.trim().toLowerCase();
     let keywords = searchText.split(/[-\s]+/);
     if (keywords.length > 1) {
       keywords.push(searchText);
@@ -243,9 +228,6 @@ KEEP.initLocalSearch = () => {
         datas = datas.filter(data => data.title).map(data => {
           data.title = data.title.trim();
           data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : '';
-          if (KEEP.theme_config.local_search.unescape) {
-            data.content = unescapeHtml(data.content);
-          }
           data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/');
           return data;
         });
@@ -259,18 +241,8 @@ KEEP.initLocalSearch = () => {
     fetchData();
   }
 
-  if (KEEP.theme_config.local_search.trigger === 'auto') {
+  if (searchInputDom) {
-    if (input) {
+    searchInputDom.addEventListener('input', inputEventFunction);
-      input.addEventListener('input', inputEventFunction);
-    }
-
-  } else {
-    document.querySelector('.search-icon').addEventListener('click', inputEventFunction);
-    input.addEventListener('keypress', event => {
-      if (event.key === 'Enter') {
-        inputEventFunction();
-      }
-    });
   }
 
   // Handle and trigger popup window
@@ -278,7 +250,7 @@ KEEP.initLocalSearch = () => {
     element.addEventListener('click', () => {
       document.body.style.overflow = 'hidden';
       document.querySelector('.search-pop-overlay').style.display = 'block';
-      input.focus();
+      searchInputDom.focus();
       if (!isfetched) fetchData();
     });
   });
@@ -294,6 +266,11 @@ KEEP.initLocalSearch = () => {
       onPopupClose();
     }
   });
+  document.querySelector('.search-input-field-pre').addEventListener('click', () => {
+    searchInputDom.value = '';
+    searchInputDom.focus();
+    inputEventFunction();
+  });
   document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
   window.addEventListener('pjax:success', onPopupClose);
   window.addEventListener('keyup', event => {