search completed

6 files changed, 364 insertions, 176 deletions

diff --git a/assets/sass/components/_search.scss b/assets/sass/components/_search.scss
index b166245..0be9b32 100644
--- a/assets/sass/components/_search.scss
+++ b/assets/sass/components/_search.scss
@@ -67,6 +67,82 @@
       color: themed('search-highlight-color');
     }
   }
+
+  &-result {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 8px);
+    z-index: z('navbar');
+    margin: 4px 0;
+
+    @include themify($themes) {
+      background-color: themed('body-background-color');
+    }
+
+    &[data-display="block"] {
+      display: block;
+    }
+
+    &[data-display="none"] {
+      display: none;
+    }
+
+    &__header {
+    }
+
+    &__close {
+      position: absolute;
+      right: 0.25rem;
+      top: 0.25rem;
+      cursor: pointer;
+
+      @include themify($themes) {
+        color: themed('body-color');
+        @include on-event {
+          color: themed('active-font-color');
+        }
+      }
+    }
+
+    &__body {
+      margin-top: 2.25rem;
+      padding: 0 1rem;
+      position: relative;
+      display: block;
+      overflow: auto;
+      height: calc(100% - 3rem);
+
+      @include themify($themes) {
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
+    }
+
+    &__item {
+      padding: 1rem 0;
+
+      @include themify($themes) {
+        border-bottom: 2px dashed themed('hr-color');
+
+        &--title {
+          font-family: $title-font;
+          font-size: 1rem;
+          margin: 0.25rem 0;
+          color: themed('title-color');
+
+          &::before {
+            content: "📋 ";
+          }
+        }
+
+        &--desc {
+          font-size: 0.9rem;
+          margin: 0.25rem 0;
+          color: themed('body-color');
+        }
+      }
+    }
+  }
 }
 
 .menu-item {
@@ -94,6 +170,8 @@
 #search-results {
   &.dd {
     display: none;
+    z-index: z('navbar');
+
     &.is-active {
       display: inline-block;
       position: absolute;
@@ -123,7 +201,9 @@
     &-item {
       width: 100%;
       font-size: 1rem;
-      padding: 0.125rem;
+      padding: 0.35rem 0.6rem;
+
+
       @include on-event {
         @include themify($themes) {
           background-color: themed('search-hover-background-color');
@@ -242,6 +322,8 @@
 
   &__item {   
     padding: 0.5rem;   
+    list-style-type: none;
+
     &--title {
       font-size: 1.2rem;      
       @include themify($themes) {
@@ -253,7 +335,6 @@
       font-size: 0.9rem;
       padding: 0.25rem 0.5rem;
       
-      @include truncate(960px);
       @include themify($themes) {
         color: themed('search-color');
       }
diff --git a/assets/sass/pages/_list.scss b/assets/sass/pages/_list.scss
index 7e47ca2..0fd3049 100644
--- a/assets/sass/pages/_list.scss
+++ b/assets/sass/pages/_list.scss
@@ -1,6 +1,8 @@
 #list-main {
-  display: flex;
-  flex-direction: column;
+  position: relative;
+  
+  @include flexbox();
+  @include flex-direction(column);
   @include themify($themes) {
     background-color: themed('body-background-color');
   }
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index 7ef4afa..ce5df1c 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -6,11 +6,18 @@
 
 .single {
   padding: 0 1rem;
-  display: block;
   position: relative;
   width: 100%;
   overflow-wrap: break-word;
 
+  &[data-display="block"] {
+    display: block;
+  }
+
+  &[data-display="none"] {
+    display: none;
+  }
+
   &__title {
     font-size: 2.5rem;
     font-weight: 900;
diff --git a/layouts/_default/list.json.json b/layouts/_default/list.json.json
deleted file mode 100644
index e477612..0000000
--- a/layouts/_default/list.json.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{{- $pctx := . -}}
-{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
-{{- $pages := $pctx.RegularPages -}}
-{{- $limit := .Site.Config.Services.RSS.Limit -}}
-{{- if ge $limit 1 -}}
-{{- $pages = $pages | first $limit -}}
-{{- end -}}
-{{ $length := (len $pages) -}}
-{
-    "version" : "https://jsonfeed.org/version/1",
-    "title" : "{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} {{ i18n "string_on" }} {{ end }}{{ .Site.Title }}{{ end }}",
-    "description": "{{ i18n "string_recent_content" }} {{ if ne  .Title  .Site.Title }}{{ with .Title }}{{ i18n "string_in" }} {{ . }} {{ end }}{{ end }}{{ i18n "string_on" }} {{ .Site.Title }}",
-    "home_page_url" : "{{ .Site.BaseURL }}",
-    {{ with .OutputFormats.Get "JSON" -}}
-    "feed_url" : "{{ .Permalink }}",
-    {{ end -}}
-    {{ with $.Param "icon" -}}
-    "icon" : "{{ . | absURL }}",
-    {{ end -}}
-    {{ with $.Param "favicon" -}}
-    "favicon" : "{{ . | absURL }}",
-    {{ end -}}
-    {{ with .Site.Author.name -}}
-    "author" : {
-        "name" : "{{ . }}"{{ with $.Site.Author.url }},
-        "url": "{{ . }}"{{ end }}{{ with $.Site.Author.avatar }},
-        "avatar": "{{ . | absURL }}"{{ end }}
-    },
-    {{ end -}}
-    "items" : [
-    {{ range $index, $element := $pages -}}
-    {
-        "title" : {{ .Title | jsonify }},
-        "date_published" : "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
-        "date_modified" : "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
-        "id" : "{{ .Permalink }}",
-        "url" : "{{ .Permalink }}",
-        {{ with .Params.author -}}
-        "author" : {
-          "name" : "{{ . }}"
-        },
-        {{ end -}}
-        "content_html" : {{ .Content | jsonify }}
-    }{{ if ne (add $index 1) $length }},{{ end }}
-    {{ end -}}
-    ]
-}
diff --git a/layouts/partials/head/scripts.html b/layouts/partials/head/scripts.html
index 8820062..d040c9e 100644
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@@ -31,6 +31,7 @@
       });
     }
     // ============================================================
+
     
     // ======================= toggle theme =======================
     var root = document.getElementById('root');
@@ -300,44 +301,8 @@
 
 
   // ========================== search ==========================
-    var baseurl = null;
-    {{ $siteBaseURL:= .Site.BaseURL }}
-    var siteBaseURL = JSON.parse({{ $siteBaseURL | jsonify }});
-    var siteBaseChecker = /\/\w+\//i;
-    var isSlug = siteBaseChecker.test(siteBaseURL);
-    var isThemeSite = location.origin.includes('themes.gohugo.io');
-
-    {{ if .Site.IsMultiLingual }}
-        if (isThemeSite) {
-          baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
-        } else {
-          var hasLangPostfix = location.pathname.includes("/{{.Site.Language.Lang}}");
-          if (hasLangPostfix) {
-            if (isSlug) {
-              baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0] + "{{.Site.Language.Lang}}";
-            } else {
-              baseurl = location.origin + "/{{.Site.Language.Lang}}";
-            }
-          } else {
-            if (isSlug) {
-              baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0];
-            } else {
-              baseurl = location.origin;
-            }
-          }
-        }
-    {{ else }}
-        if (isThemeSite) {
-          baseurl = "{{.Site.BaseURL}}";
-        } else {
-          if (isSlug) {
-            baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0];
-          } else {
-            baseurl = location.origin;
-          } 
-        }
-    {{ end }}
-
+    {{ $permalink:= .Permalink }}
+    var permalink = JSON.parse({{ $permalink | jsonify }});
     var searchResults = null;
     var searchMenu = null;
     var searchText = null;
@@ -347,17 +312,9 @@
 
     var fuse = null;
 
-    function endsWith(str, suffix) {
-      return str.indexOf(suffix, str.length - suffix.length) !== -1;
-    }
-
-    function initFuse() {
-      if (!endsWith(baseurl, "/")) {
-        baseurl = baseurl + '/';
-      };
-
+    (function initFuse() {
       var xhr = new XMLHttpRequest();
-      xhr.open('GET', baseurl + "index.json");
+      xhr.open('GET', permalink + "index.json");
       xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
       xhr.onload = function () {
         if (xhr.status === 200) {
@@ -377,29 +334,119 @@
         }
       };
       xhr.send();
+    })();
+    
+    function makeLi(ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'search-result__item';
+      
+      var a = document.createElement('a');
+      a.innerHTML = obj.title;
+      a.setAttribute('class', 'search-result__item--title');
+      a.setAttribute('href', obj.permalink);
+
+      var descDiv = document.createElement('div');
+      descDiv.setAttribute('class', 'search-result__item--desc');
+      if (obj.description) {
+        descDiv.innerHTML = obj.description;
+      } else if (obj.content) {
+        descDiv.innerHTML = obj.content.substring(0, 80);
+      }
+      
+      li.appendChild(a);
+      li.appendChild(descDiv);
+      ulElem.appendChild(li);
+    }
+
+    function makeHighlightLi(ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'search-result__item';
+      var descDiv = null;
+
+      var a = document.createElement('a');
+      a.innerHTML = obj.item.title;
+      a.setAttribute('class', 'search-result__item--title');
+      a.setAttribute('href', obj.item.uri);
+
+      if (obj.matches && obj.matches.length) {
+        for (var i = 0; i < obj.matches.length; i++) {
+          if ('title' === obj.matches[i].key) {
+            a = document.createElement('a');
+            a.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
+            a.setAttribute('class', 'search-result__item--title');
+            a.setAttribute('href', obj.item.uri);
+          }
+          
+          if ('description' === obj.matches[i].key) {
+            descDiv = document.createElement('div');
+            descDiv.setAttribute('class', 'search-result__item--desc');
+            descDiv.innerHTML = generateHighlightedText(obj.item.description, obj.matches[i].indices);
+          } else if ('content' === obj.matches[i].key) {
+            if (!descDiv) {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = generateHighlightedText(obj.item.content.substring(0, 80), obj.matches[i].indices);
+            }
+          } else {
+            if (obj.item.description) {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = obj.item.description;
+            } else {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = obj.item.content.substring(0, 80);
+            }
+          }
+        }
+
+        li.appendChild(a);
+        if (descDiv) {
+          li.appendChild(descDiv);
+        }
+        if (li) {
+          ulElem.appendChild(li);
+        }
+      }
     }
 
-    function renderSearchResults(results) { // [{}, {}, ...] or [{item: {}, matches: []}, ...]
+    function renderSearchResults(searchText, results) {
       searchResults = document.getElementById('search-results');
       searchMenu = document.getElementById('search-menu');
       searchResults.setAttribute('class', 'dd is-active');
+      
+      var ul = document.createElement('ul');
+      ul.setAttribute('class', 'dd-content search-content');
 
-      var content = document.createElement('div');
-      content.setAttribute('class', 'dd-content search-content');
-
-      if (results.length > 0) {
+      if (results.length) {
         results.forEach(function (result) {
-          var item = document.createElement('a');
-          item.setAttribute('href', result.uri);
-          item.setAttribute('class', 'dd-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
-          content.appendChild(item);
+          var li = document.createElement('li');
+          var a = document.createElement('a');
+          a.setAttribute('href', result.uri);
+          a.setAttribute('class', 'dd-item');
+          a.appendChild(li);
+
+          var titleDiv = document.createElement('div');
+          titleDiv.innerHTML = result.title;
+          titleDiv.setAttribute('class', 'search-result__item--title');
+
+          var descDiv = document.createElement('div');
+          descDiv.setAttribute('class', 'search-result__item--desc');
+          if (result.description) {
+            descDiv.innerHTML = result.description;
+          } else if (result.content) {
+            descDiv.innerHTML = result.content.substring(0, 80);
+          }
+
+          li.appendChild(titleDiv);
+          li.appendChild(descDiv);
+          ul.appendChild(a);
         });
       } else {
-        var item = document.createElement('span');
-        item.setAttribute('class', 'dd-item');
-        item.innerText = 'No results found';
-        content.appendChild(item);
+        var li = document.createElement('li');
+        li.setAttribute('class', 'dd-item');
+        li.innerText = 'No results found';
+        ul.appendChild(li);
       }
 
       while (searchMenu.hasChildNodes()) {
@@ -407,30 +454,73 @@
           searchMenu.lastChild
         );
       }
-      searchMenu.appendChild(content);
+      
+      searchMenu.appendChild(ul);
     }
 
-    function renderSearchHighlightResults(results) {      
+    function renderSearchHighlightResults(searchText, results) {
       searchResults = document.getElementById('search-results');
       searchMenu = document.getElementById('search-menu');
       searchResults.setAttribute('class', 'dd is-active');
 
-      var content = document.createElement('div');
-      content.setAttribute('class', 'dd-content search-content');
+      var ul = document.createElement('ul');
+      ul.setAttribute('class', 'dd-content search-content');
 
-      if (results.length > 0) {
+      if (results.length) {
         results.forEach(function (result) {
-          var item = document.createElement('a');
-          item.setAttribute('href', result.item.uri);
-          item.setAttribute('class', 'dd-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="menu-item__desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
-          content.appendChild(item);
+          var li = document.createElement('li');
+          var a = document.createElement('a');
+          var descDiv = null;
+
+          a.setAttribute('href', result.item.uri);
+          a.setAttribute('class', 'dd-item');
+          a.appendChild(li);
+
+          var titleDiv = document.createElement('div');
+          titleDiv.innerHTML = result.item.title;
+          titleDiv.setAttribute('class', 'search-result__item--title');
+          
+          if (result.matches && result.matches.length) {
+            for (var i = 0; i < result.matches.length; i++) {
+              if ('title' === result.matches[i].key) {
+                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
+              }
+
+              if ('description' === result.matches[i].key) {
+                descDiv = document.createElement('div');
+                descDiv.setAttribute('class', 'search-result__item--desc');
+                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
+              } else if ('content' === result.matches[i].key) {
+                if (!descDiv) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'search-result__item--desc');
+                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 80), result.matches[i].indices);
+                }
+              } else {
+                if (result.item.description) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'search-result__item--desc');
+                  descDiv.innerHTML = result.item.description;
+                } else {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'search-result__item--desc');
+                  descDiv.innerHTML = result.item.content.substring(0, 80);
+                }
+              }
+            }
+            
+            li.appendChild(titleDiv);
+            if (descDiv) {
+              li.appendChild(descDiv);
+            }
+            ul.appendChild(a);
+          }
         });
       } else {
-        var item = document.createElement('span');
-        item.setAttribute('class', 'dd-item');
-        item.innerText = 'No results found';
-        content.appendChild(item);
+        var li = document.createElement('li');
+        li.setAttribute('class', 'dd-item');
+        li.innerText = 'No results found';
+        ul.appendChild(li);
       }
 
       while (searchMenu.hasChildNodes()) {
@@ -438,10 +528,10 @@
           searchMenu.lastChild
         );
       }
-      searchMenu.appendChild(content);
+      searchMenu.appendChild(ul);
     }
 
-    function renderSearchResultsMobile(results) {
+    function renderSearchResultsMobile(searchText, results) {
       searchResults = document.getElementById('search-mobile-results');
 
       var content = document.createElement('div');
@@ -451,7 +541,7 @@
         results.forEach(function (result) {
           var item = document.createElement('a');
           item.setAttribute('href', result.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
+          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
           content.appendChild(item);
         });
       } else {
@@ -466,29 +556,72 @@
       searchResults.appendChild(content);      
     }
 
-    function renderSearchHighlightResultsMobile(results) {
+    function renderSearchHighlightResultsMobile(searchText, results) {
       searchResults = document.getElementById('search-mobile-results');
 
-      var content = document.createElement('div');
-      content.setAttribute('class', 'mobile-search__content');
+      var ul = document.createElement('div');
+      ul.setAttribute('class', 'mobile-search__content');
 
-      if (results.length > 0) {
+      if (results.length) {
         results.forEach(function (result) {
-          var item = document.createElement('a');
-          item.setAttribute('href', result.item.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="mobile-search__item--desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
-          content.appendChild(item);
+          var li = document.createElement('li');
+          var a = document.createElement('a');
+          var descDiv = null;
+
+          a.setAttribute('href', result.item.uri);
+          a.appendChild(li);
+          li.setAttribute('class', 'mobile-search__item');
+
+          var titleDiv = document.createElement('div');
+          titleDiv.innerHTML = result.item.title;
+          titleDiv.setAttribute('class', 'mobile-search__item--title');
+          
+          if (result.matches && result.matches.length) {
+            for (var i = 0; i < result.matches.length; i++) {
+              if ('title' === result.matches[i].key) {
+                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
+              }
+
+              if ('description' === result.matches[i].key) {
+                descDiv = document.createElement('div');
+                descDiv.setAttribute('class', 'mobile-search__item--desc');
+                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
+              } else if ('content' === result.matches[i].key) {
+                if (!descDiv) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'mobile-search__item--desc');
+                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 150), result.matches[i].indices);
+                }
+              } else {
+                if (result.item.description) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'mobile-search__item--desc');
+                  descDiv.innerHTML = result.item.description;
+                } else {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'mobile-search__item--desc');
+                  descDiv.innerHTML = result.item.content.substring(0, 150);
+                }
+              }
+            }
+            
+            li.appendChild(titleDiv);
+            if (descDiv) {
+              li.appendChild(descDiv);
+            }
+            ul.appendChild(a);
+          }
         });
       } else {
         var item = document.createElement('span');
-        content.appendChild(item);
+        ul.appendChild(item);
       }
 
       let wrap = document.getElementById('search-mobile-results');
       while (wrap.firstChild) {
         wrap.removeChild(wrap.firstChild)
       }
-      searchResults.appendChild(content);
+      searchResults.appendChild(ul);
     }
 
     function generateHighlightedText(text, regions) {
@@ -517,67 +650,70 @@
       return content;
     };
 
-    initFuse();
-
     var searchElem = document.getElementById('search');
     var searchMobile = document.getElementById('search-mobile');
+    var searchResultsContainer = document.getElementById('search-results');
 
+    searchElem ? 
     searchElem.addEventListener('input', function(e) {
-      if (!e.target.value) {
-        document.getElementById('search-results').setAttribute('class', 'dd');
-        return null;
-      }
-
-      if (window.innerWidth < 770) {
+      if (!e.target.value | window.innerWidth < 770) {
+        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
         return null;
       }
 
       searchText = e.target.value;
-
       var results = fuse.search(e.target.value);
+
       if (enableSearchHighlight) {
-        renderSearchHighlightResults(results);
+        renderSearchHighlightResults(searchText, results);
       } else {
-        renderSearchResults(results);
+        renderSearchResults(searchText, results);
       }
-    });
 
+      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
+      dropdownItems ? dropdownItems.forEach(function (item) {
+        item.addEventListener('mousedown', function (e) {
+          console.log('mousedown');
+          e.target.click();
+        });
+      }) : null;
+    }) : null;
+
+    searchElem ? 
     searchElem.addEventListener('blur', function() {
       if (window.innerWidth < 770) {
         return null;
       }
-      setTimeout(function () {
-        document.getElementById('search-results').setAttribute('class', 'dd');
-      }, 100);
-    });
+      searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
+    }) : null;
 
+    searchElem ? 
     searchElem.addEventListener('click', function(e) {
       if (window.innerWidth < 770) {
         return null;
       }
       if (!e.target.value) {
-        document.getElementById('search-results').setAttribute('class', 'dd');
+        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
         return null;
       }
 
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
+
       if (enableSearchHighlight) {
-        renderSearchHighlightResults(results);
+        renderSearchHighlightResults(searchText, results);
       } else {
-        renderSearchResults(results);
-      }
-    });
-    
-    function indexInParent(node) {
-      var children = node.parentNode.childNodes;
-      var num = 0;
-      for (var i = 0; i < children.length; i++) {
-        if (children[i] == node) return num;
-        if (children[i].nodeType == 1) num++;
+        renderSearchResults(searchText, results);
       }
-      return -1;
-    }
+
+      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
+      dropdownItems ? dropdownItems.forEach(function (item) {
+        item.addEventListener('mousedown', function (e) {
+          console.log('mousedown');
+          e.target.click();
+        });
+      }) : null;
+    }) : null;
 
     var searchMenuElem = document.getElementById("search-menu");
     var activeItem = document.querySelector('#search-menu .dd-item.is-active');
@@ -637,6 +773,7 @@
       }
     });
 
+    searchMobile ? 
     searchMobile.addEventListener('input', function(e) {
       if (!e.target.value) {
         let wrap = document.getElementById('search-mobile-results');
@@ -648,13 +785,21 @@
 
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
-      renderSearchResultsMobile(results);
+      
       if (enableSearchHighlight) {
-        renderSearchHighlightResultsMobile(results);
+        renderSearchHighlightResultsMobile(searchText, results);
       } else {
-        renderSearchResultsMobile(results);
+        renderSearchResultsMobile(searchText, results);
       }
-    });
+
+      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
+      dropdownItems ? dropdownItems.forEach(function (item) {
+        item.addEventListener('mousedown', function (e) {
+          console.log('mousedown');
+          e.target.click();
+        });
+      }) : null;
+    }) : null;
   // ============================================================
   }
 </script>
\ No newline at end of file
diff --git a/layouts/partials/main/sections/list-main.html b/layouts/partials/main/sections/list-main.html
index 3547cea..c740ab9 100644
--- a/layouts/partials/main/sections/list-main.html
+++ b/layouts/partials/main/sections/list-main.html
@@ -1,4 +1,4 @@
-<div class="single">
+<div class="single" data-display="block">
   <h2 class="single__title">{{ .Title }}</h2>
   {{ if eq .Type "blog" }}
     <div class="single__meta">