Use HTML5 template to render search results

CHANGELOG.md

@@ -13,7 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Set the language target to `es2015` when build JavaScript.
+- Set the language target to `es2015` when build JavaScript
+- Use HTML5 `<template>` tag to render search results
 
 ### Fixed
 

assets/js/search.js

@@ -129,21 +129,32 @@ function clearSearchResults() {
 }
 
 function updateSearchResults(query, results) {
-  document.getElementById('search-results-body').innerHTML = results
-    .map((hit) => `
-    <article class="post" data-score="${hit.score.toFixed(2)}">
-      <header>
-        <h2 class="post-title">
-        <a href="${hit.href}?utm_source=search" class="search-result-page-title">${hit.title}</a>
-        </h2>
-      </header>
-      <p class="post-content">${createSearchResultBlurb(query, hit.content)}</p>
-    </article>
-    `
-    )
-    .join('');
+  const template = document.querySelector('template').content;
+  const fragment = document.createDocumentFragment();
 
-  document.getElementById('results-count').innerHTML = results.length;
+  const resultsBody = document.getElementById('search-results-body');
+  resultsBody.textContent = '';
+
+  for (const id in results) {
+    const item = results[id];
+    const result = template.cloneNode(true);
+
+    const article = result.querySelector('article');
+    article.dataset.score = item.score.toFixed(2);
+
+    const a = result.querySelector('a');
+    a.innerHTML = item.title;
+    a.href = `${item.href}?utm_source=search`;
+
+    const content = result.querySelector('.post-content');
+    content.innerHTML = createSearchResultBlurb(query, item.content);
+
+    fragment.appendChild(result);
+  }
+
+  resultsBody.appendChild(fragment);
+
+  document.getElementById('results-count').textContent = results.length;
 }
 
 function createSearchResultBlurb(query, pageContent) {

assets/sass/_customize.scss

@@ -1,5 +1,10 @@
 @import "_mixins";
 
+template {
+  // IE support for HTML5 <template> tag
+  display: none;
+}
+
 .masthead-title small {
   font-size: .78rem;
 }

layouts/shortcodes/form-search.html

@@ -32,6 +32,15 @@
     <div id="search-results-body" class="post-list"></div>
 </section>
 
+<template>
+    <article class="post" data-score="">
+        <header>
+          <h2 class="post-title"><a href="#" class="search-result-page-title"></a></h2>
+        </header>
+        <p class="post-content"></p>
+      </article>
+</template>
+
 {{- $isProduction := (or (eq (getenv "HUGO_ENV") "production") (eq site.Params.env "production")) -}}
 
 {{- /* Add lunr.js. */ -}}

resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -875,6 +875,9 @@ form input:-moz-ui-invalid {
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out; }
 
+template {
+  display: none; }
+
 .masthead-title small {
   font-size: .78rem; }