fix: 修复搜索数据返回后未能及时显示的bug

Lete114 · Apr 19, 2022 · a323f93 · a323f93
1 parent f1d12cb
commit a323f93
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-mengd",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "A simple, lightweight Hexo theme",
   "main": "package.json",
   "scripts": {},

diff --git a/source/js/search.js b/source/js/search.js
@@ -11,94 +11,108 @@ try {
   /**
    * 本地搜索
    * 来源于hexo-butterfly
-   * 由Lete乐特进行小型改动
+   * 由Lete乐特进行小改动
    * @param {*} path 文件路径
    */
   async function search(path) {
-    const suffix = path.split('.')[1]
-    let datas = []
-    const response = await fetch(path)
+    try {
+      var $resultContent = $id(contentId)
+      $resultContent.insertAdjacentHTML('beforeBegin', '<i class="fas fa-spinner fa-pulse" style="display:flex;justify-content:center"></i>')
 
-    if (suffix == 'json') datas = await response.json()
-    if (suffix == 'xml') {
-      const result = await response.text()
-      const DOM = new window.DOMParser()
-      const data = DOM.parseFromString(result, 'text/xml')
-      datas = [...data.querySelectorAll('entry')].map((item) => {
-        return {
-          title: item.querySelector('title').textContent,
-          content: item.querySelector('content').textContent,
-          url: item.querySelector('url').textContent
-        }
-      })
-    }
+      const suffix = path.split('.')[1]
+      let datas = []
+      const response = await fetch(path)
+
+      if (suffix == 'json') datas = await response.json()
+      if (suffix == 'xml') {
+        const result = await response.text()
+        const DOM = new window.DOMParser()
+        const data = DOM.parseFromString(result, 'text/xml')
+        datas = [...data.querySelectorAll('entry')].map((item) => {
+          return {
+            title: item.querySelector('title').textContent,
+            content: item.querySelector('content').textContent,
+            url: item.querySelector('url').textContent
+          }
+        })
+      }
 
-    if (datas.length) isLoad = true
+      if (datas.length) isLoad = true
+      // 删掉加载动画
+      const pulse = $query('i.fa-pulse')
+      pulse.parentElement.removeChild(pulse)
 
-    var $input = $id(searchId)
-    var $resultContent = $id(contentId)
-    $input.addEventListener('input',function ()  {
-      var str = '<ul class="search-result-list">'
-      var keywords = this.value
-        .trim()
-        .toLowerCase()
-        .split(/[\s\-]+/)
-      $resultContent.innerHTML = ''
-      if (this.value.trim().length <= 0) return
-      // perform local searching
-      datas.forEach((data) => {
-        var isMatch = true
-        if (!data.title || data.title.trim() === '') data.title = 'Untitled'
-        var dataTitle = data.title.trim().toLowerCase()
-        var dataContent = data.content
+      // 获取搜索输入框
+      var $input = $id(searchId)
+      // 获取到信息后调用一次
+      onInput()
+      $input.addEventListener('input', onInput)
+
+      function onInput() {
+        var str = '<ul class="search-result-list">'
+        var keywords = $input.value
           .trim()
-          .replace(/<[^>]+>/g, '')
           .toLowerCase()
-        var dataUrl = data.url.startsWith('/') ? data.url : '/' + data.url
-        var indexTitle = -1
-        var indexContent = -1
-        var firstOccur = -1
-        // only match artiles with not empty contents
-        if (dataContent !== '') {
-          keywords.forEach(function (keyword, i) {
-            indexTitle = dataTitle.indexOf(keyword)
-            indexContent = dataContent.indexOf(keyword)
+          .split(/[\s\-]+/)
+        $resultContent.innerHTML = ''
+        if ($input.value.trim().length <= 0) return
+        // perform local searching
+        datas.forEach((data) => {
+          var isMatch = true
+          if (!data.title || data.title.trim() === '') data.title = 'Untitled'
+          var dataTitle = data.title.trim().toLowerCase()
+          var dataContent = data.content
+            .trim()
+            .replace(/<[^>]+>/g, '')
+            .toLowerCase()
+          var dataUrl = data.url.startsWith('/') ? data.url : '/' + data.url
+          var indexTitle = -1
+          var indexContent = -1
+          var firstOccur = -1
+          // only match artiles with not empty contents
+          if (dataContent !== '') {
+            keywords.forEach(function (keyword, i) {
+              indexTitle = dataTitle.indexOf(keyword)
+              indexContent = dataContent.indexOf(keyword)
 
-            if (indexTitle < 0 && indexContent < 0) isMatch = false
-            else {
-              if (indexContent < 0) indexContent = 0
-              if (i == 0) firstOccur = indexContent
-            }
-          })
-        } else isMatch = false
-        // show search results
-        if (isMatch) {
-          var content = data.content.trim().replace(/<[^>]+>/g, '')
-          if (firstOccur >= 0) {
-            // cut out 100 characters
-            var start = firstOccur - 20
-            var end = firstOccur + 80
-            if (start < 0) start = 0
-            if (start == 0) end = 100
-            if (end > content.length) end = content.length
-            var matchContent = content.substring(start, end)
-
-            // highlight all keywords
-            keywords.forEach((keyword) => {
-              var regS = new RegExp(keyword, 'gi')
-              matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
-              dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+              if (indexTitle < 0 && indexContent < 0) isMatch = false
+              else {
+                if (indexContent < 0) indexContent = 0
+                if (i == 0) firstOccur = indexContent
+              }
             })
-            str += "<li><a href='" + dataUrl + "' class='search-result-title'>" + dataTitle + '</a>'
-            str += '<p class="search-result">' + matchContent + '...</p>'
+          } else isMatch = false
+          // show search results
+          if (isMatch) {
+            var content = data.content.trim().replace(/<[^>]+>/g, '')
+            if (firstOccur >= 0) {
+              // cut out 100 characters
+              var start = firstOccur - 20
+              var end = firstOccur + 80
+              if (start < 0) start = 0
+              if (start == 0) end = 100
+              if (end > content.length) end = content.length
+              var matchContent = content.substring(start, end)
+
+              // highlight all keywords
+              keywords.forEach((keyword) => {
+                var regS = new RegExp(keyword, 'gi')
+                matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+              })
+              str += "<li><a href='" + dataUrl + "' class='search-result-title'>" + dataTitle + '</a>'
+              str += '<p class="search-result">' + matchContent + '...</p>'
+            }
+            str += '</li>'
           }
-          str += '</li>'
-        }
-      })
-      str += '</ul>'
-      $resultContent.innerHTML = str
-      window.pjax && window.pjax.refresh($resultContent)
-    })
+        })
+        str += '</ul>'
+        $resultContent.innerHTML = str
+        window.pjax && window.pjax.refresh($resultContent)
+      }
+    } catch (error) {
+      isLoad = false
+    }
   }
 
   // 显示搜索框