davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>How to create a search page for a static website with vanilla JS (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://gomakethings.com/how-to-create-a-search-page-for-a-static-website-with-vanilla-js/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>How to create a search page for a static website with vanilla JS</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://gomakethings.com/how-to-create-a-search-page-for-a-static-website-with-vanilla-js/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>One of the biggest missing features from most static site generators (like <a href="https://gohugo.io/">Hugo</a>, <a href="https://www.11ty.io/">11ty</a>, and <a href="https://jekyllrb.com/">Jekyll</a>, ) is that they lack built-in search.</p>

<p>Database-driven platforms like WordPress make a server call and search the database to find matching content. Static websites have no database to query.</p>

<p>Today, I’m going to share how I built <a href="https://gomakethings.com/search/">the search functionality for my site</a> with vanilla JS. Let’s dig in!</p>

<h2 id="quick-aside-done-for-you-alternative">Quick aside: done-for-you alternative</h2>

<p>If you don’t want to roll-your-own search functionality, <a href="https://www.algolia.com/">Algolia</a> and <a href="https://www.elastic.co/">ElasticSearch</a> are two done-for-you search vendors.</p>

<p>They both offer free tiers, as well as paid versions with more advanced features.</p>

<p>But, because I like to <del>do things the hard way</del> have more control over the user experience, I wrote my own search functionality instead of using one of them.</p>

<h2 id="the-search-form">The Search Form</h2>

<p>My search functionality starts as a progressively enhanced search form.</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">"https://duckduckgo.com/"</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span> <span class="na">id</span><span class="o">=</span><span class="s">"form-search"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"input-search"</span><span class="p">&gt;</span>Enter your search criteria:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"q"</span> <span class="na">id</span><span class="o">=</span><span class="s">"input-search"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"sites"</span> <span class="na">value</span><span class="o">=</span><span class="s">"YourAwesomeWebsite.com"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>Search<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span></code></pre></div>
<p>If the JavaScript fails (or the user tries to search before it loads), this will open up <a href="https://duckduckgo.com/">Duck Duck Go</a> and search for articles only on my site.</p>

<p>Be sure to replace <code>YourAwesomeWebsite.com</code> with the actual URL to your site.</p>

<p>We’ll also add two additional elements to the page. The <code>#search-results</code> element is where we’ll inject the actual search results. The <code>#search-status</code> element is where we’ll display the number of items found.</p>

<p>We want this to announce to screen readers, so we’ll also add the <code>[role="status"]</code> attribute to it.</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"search-status"</span> <span class="na">role</span><span class="o">=</span><span class="s">"status"</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"search-results"</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div>
<h2 id="creating-a-search-index">Creating a search index</h2>

<p>In order to search your site, we need to create an index of content.</p>

<p>The process for this varies from one static site generator to another, but the end result is the same. You want to generate an array of all of the searchable content on your site.</p>

<p>Some people create an external JSON file for this, but I prefer to embed it as a JavaScript variable directly on the search page. it looks like this:</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">let</span> <span class="nx">searchIndex</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span>
        <span class="nx">title</span><span class="o">:</span> <span class="s2">"My awesome article"</span><span class="p">,</span>
        <span class="nx">date</span><span class="o">:</span> <span class="s2">"December 18, 2018"</span><span class="p">,</span>
        <span class="nx">url</span><span class="o">:</span> <span class="s2">"https://gomakethings.com/my-awesome-article"</span><span class="p">,</span>
        <span class="nx">content</span><span class="o">:</span> <span class="s2">"The full text of the content..."</span><span class="p">,</span>
        <span class="nx">summary</span><span class="o">:</span> <span class="s2">"A short summary or preview of the content (can also be a clipped version of the first few sentences)..."</span>
    <span class="p">},</span>
    <span class="c1">// More content...
</span><span class="c1"></span><span class="p">];</span>
</code></pre></div>
<p>We can use this to both search for articles and generate results on the page.</p>

<h2 id="creating-a-search-function">Creating a search function</h2>

<p>Next, let’s create a function to actually <em>do</em> the searching. This can be <a href="https://gomakethings.com/the-many-ways-to-write-an-immediately-invoked-function-expression-iife-in-javascript/">an IIFE</a> or a named function. We just want a way to <a href="https://gomakethings.com/how-scope-works-in-javascript/">scope our code</a>.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Code will go here...
</span><span class="c1"></span><span class="p">})();</span>
</code></pre></div>
<p>Next, we need to get the needed elements from the DOM. We can do that with the <code>document.querySelector()</code> method.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

    <span class="c1">// Get the DOM elements
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#form-search'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#input-search'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">resultList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#search-results'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">searchStatus</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#search-status'</span><span class="p">);</span>

<span class="p">})();</span>
</code></pre></div>
<p>If we can’t find any of them, or if the <code>searchIndex</code> doesn’t exist, we’ll <code>return</code> to stop the function from doing anything else.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

    <span class="c1">// Get the DOM elements
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#form-search'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#input-search'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">resultList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#search-results'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">searchStatus</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#search-status'</span><span class="p">);</span>

    <span class="c1">// Make sure required content exists
</span><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">form</span> <span class="o">||</span> <span class="o">!</span><span class="nx">input</span> <span class="o">||</span> <span class="o">!</span><span class="nx">resultList</span> <span class="o">||</span> <span class="o">!</span><span class="nx">searchStatus</span> <span class="o">||</span> <span class="o">!</span><span class="nx">searchIndex</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>

<span class="p">})();</span>
</code></pre></div>
<h2 id="running-a-search">Running a search</h2>

<p>Next, we need to detect when the user searches for something. To do that, we’ll listen for <code>submit</code> events on the <code>form</code> element.</p>

<p>(<em>The rest of the code all happens inside the IIFE, but I’m sharing just the relevant stuff to make it easier to read.</em>)</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="c1">// Create a submit handler
</span><span class="c1"></span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span> <span class="nx">submitHandler</span><span class="p">);</span>
</code></pre></div>
<p>In the <code>submitHandler()</code> function, we’ll use the <code>event.preventDefault()</code> method to stop the form from submitting to Duck Duck Go. Then, we’ll pass the <code>input.value</code> into a <code>search()</code> function that will actually look for results.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Handle submit events
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">submitHandler</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
    <span class="nx">search</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="searching-for-results">Searching for results</h2>

<p>Here’s where stuff gets a bit messy.</p>

<p>Rather than search for complete phrases, we want to look at each word from the search query, and look for it in the titles and content of our articles. We want to ignore case, and we probably also want to ignore common words like <code>a</code>, <code>an</code>, and <code>the</code>.</p>

<p>I use <a href="https://gomakethings.com/converting-strings-to-uppercase-and-lowercase-with-vanilla-javascript/">the <code>String.toLowerCase()</code> method</a> to convert the <code>query</code> to lowercase. Then, I use <a href="https://gomakethings.com/getting-an-array-from-a-string-with-vanilla-js/">the <code>String.split()</code> method</a> to convert it to an array, with each word as its own item.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">regMap</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>Next, I created an array of <code>stopWords</code>: words that should be ignored. I found a list on the web, and modified it based on the type of content I have on my site.</p>

<p>For example, I added <code>vanilla</code>, <code>javascript</code>, and <code>js</code> to my list, since almost every article I write includes those words heavily, making them meaningless.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">let</span> <span class="nx">stopWords</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'a'</span><span class="p">,</span> <span class="s1">'an'</span><span class="p">,</span> <span class="s1">'and'</span><span class="p">,</span> <span class="s1">'are'</span><span class="p">,</span> <span class="s1">'aren\'t'</span><span class="p">,</span> <span class="s1">'as'</span><span class="p">,</span> <span class="s1">'by'</span><span class="p">,</span> <span class="s1">'can'</span><span class="p">,</span> <span class="s1">'cannot'</span><span class="p">,</span> <span class="s1">'can\'t'</span><span class="p">,</span> <span class="s1">'could'</span><span class="p">,</span> <span class="s1">'couldn\'t'</span><span class="p">,</span> <span class="s1">'how'</span><span class="p">,</span> <span class="s1">'is'</span><span class="p">,</span> <span class="s1">'isn\'t'</span><span class="p">,</span> <span class="s1">'it'</span><span class="p">,</span> <span class="s1">'its'</span><span class="p">,</span> <span class="s1">'it\'s'</span><span class="p">,</span> <span class="s1">'that'</span><span class="p">,</span> <span class="s1">'the'</span><span class="p">,</span> <span class="s1">'their'</span><span class="p">,</span> <span class="s1">'there'</span><span class="p">,</span> <span class="s1">'they'</span><span class="p">,</span> <span class="s1">'they\'re'</span><span class="p">,</span> <span class="s1">'them'</span><span class="p">,</span> <span class="s1">'to'</span><span class="p">,</span> <span class="s1">'too'</span><span class="p">,</span> <span class="s1">'us'</span><span class="p">,</span> <span class="s1">'very'</span><span class="p">,</span> <span class="s1">'was'</span><span class="p">,</span> <span class="s1">'we'</span><span class="p">,</span> <span class="s1">'well'</span><span class="p">,</span> <span class="s1">'were'</span><span class="p">,</span> <span class="s1">'what'</span><span class="p">,</span> <span class="s1">'whatever'</span><span class="p">,</span> <span class="s1">'when'</span><span class="p">,</span> <span class="s1">'whenever'</span><span class="p">,</span> <span class="s1">'where'</span><span class="p">,</span> <span class="s1">'with'</span><span class="p">,</span> <span class="s1">'would'</span><span class="p">,</span> <span class="s1">'yet'</span><span class="p">,</span> <span class="s1">'you'</span><span class="p">,</span> <span class="s1">'your'</span><span class="p">,</span> <span class="s1">'yours'</span><span class="p">,</span> <span class="s1">'yourself'</span><span class="p">,</span> <span class="s1">'yourselves'</span><span class="p">,</span> <span class="s1">'the'</span><span class="p">,</span> <span class="s1">'vanilla'</span><span class="p">,</span> <span class="s1">'javascript'</span><span class="p">,</span> <span class="s1">'js'</span><span class="p">];</span>
</code></pre></div>
<p>Back in my <code>search()</code> function, I use <a href="https://gomakethings.com/what-array.filter-does-in-vanilla-js/">the <code>Array.filter()</code> method</a> to remove any <code>word</code> that’s an empty string or part of the <code>stopWords</code> array.</p>

<p>I use <a href="https://gomakethings.com/how-to-check-for-an-item-in-an-array-with-vanilla-js/">the <code>Array.includes()</code> method</a> to check if the <code>word</code> is in <code>stopWords</code>.</p>

<p>Finally, I use <a href="https://gomakethings.com/what-array.map-does-in-vanilla-js/">the <code>Array.map()</code> method</a> an <code>new RegExp()</code> constructor to create an array of regex searches from my <code>query</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">regMap</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">).</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">word</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">word</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">stopWords</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">word</span><span class="p">);</span>
    <span class="p">}).</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">word</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="nx">word</span><span class="p">,</span> <span class="s1">'i'</span><span class="p">);</span>
    <span class="p">});</span>

<span class="p">}</span>
</code></pre></div>
<h2 id="doing-the-actual-search">Doing the actual search</h2>

<p>Now that I have my regex patterns all setup, I can actually <em>do</em> the search.</p>

<p>For this, I use <a href="https://gomakethings.com/using-array.reduce-in-vanilla-js/">the <code>Array.reduce()</code> method</a> on my <code>searchIndex</code>. I want to create a new array containing just matching items. I also want to include a <code>priority</code> rating, so that more closing matching items are shown higher in the results.</p>

<p>I pass in an empty array (<code>[]</code>) as my <em>accumulator</em>, which I assign to the <code>results</code> parameter.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="c1">// ...
</span><span class="c1"></span>
    <span class="c1">// Get and sort the results
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">searchIndex</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">article</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// Do stuff...
</span><span class="c1"></span> <span class="p">},</span> <span class="p">[]);</span>
<span class="p">}</span>
</code></pre></div>
<p>Inside the callback function, I create a <code>priority</code> variable with a value of <code>0</code>.</p>

<p>Then, I loop through each item in my <code>regMap</code> using <a href="https://gomakethings.com/the-for...of-loop-in-vanilla-js/">a <code>for...of</code> loop</a>. I use the <code>RegExp.test()</code> method to look for matches in the <code>article.title</code>, and <code>RegExp.match()</code> method to look for matches in the <code>article.content</code>.</p>

<p>I give more weight to the <code>title</code> than content. If there’s a match, I increase the <code>priority</code> by <code>100</code>. For every match in <code>content</code>, I increase the <code>priority</code> by <code>1</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="c1">// ...
</span><span class="c1"></span>
    <span class="c1">// Get and sort the results
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">searchIndex</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">article</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>

        <span class="c1">// Setup priority count
</span><span class="c1"></span>     <span class="kd">let</span> <span class="nx">priority</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

        <span class="c1">// Assign priority
</span><span class="c1"></span>     <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">reg</span> <span class="k">of</span> <span class="nx">regMap</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">reg</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">article</span><span class="p">.</span><span class="nx">title</span><span class="p">))</span> <span class="p">{</span> <span class="nx">priority</span> <span class="o">+=</span> <span class="mi">100</span><span class="p">;</span> <span class="p">}</span>
            <span class="kd">let</span> <span class="nx">occurences</span> <span class="o">=</span> <span class="nx">article</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">reg</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">occurences</span><span class="p">)</span> <span class="p">{</span> <span class="nx">priority</span> <span class="o">+=</span> <span class="nx">occurences</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="p">}</span>
        <span class="p">}</span>

    <span class="p">},</span> <span class="p">[]);</span>
<span class="p">}</span>
</code></pre></div>
<p>If <code>priority</code> is greater than <code>0</code>, I use the <code>Array.push()</code> method to add a new object (<code>{}</code>) to the <code>results</code> array.</p>

<p>I include the <code>priority</code> and <code>article</code> as properties. Then, I <code>return</code> the <code>results</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="c1">// ...
</span><span class="c1"></span>
    <span class="c1">// Get and sort the results
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">searchIndex</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">article</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>

        <span class="c1">// Setup priority count
</span><span class="c1"></span>     <span class="kd">let</span> <span class="nx">priority</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

        <span class="c1">// Assign priority
</span><span class="c1"></span>     <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">reg</span> <span class="k">of</span> <span class="nx">regMap</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">reg</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">article</span><span class="p">.</span><span class="nx">title</span><span class="p">))</span> <span class="p">{</span> <span class="nx">priority</span> <span class="o">+=</span> <span class="mi">100</span><span class="p">;</span> <span class="p">}</span>
            <span class="kd">let</span> <span class="nx">occurences</span> <span class="o">=</span> <span class="nx">article</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">reg</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">occurences</span><span class="p">)</span> <span class="p">{</span> <span class="nx">priority</span> <span class="o">+=</span> <span class="nx">occurences</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="p">}</span>
        <span class="p">}</span>

        <span class="c1">// If any matches, push to results
</span><span class="c1"></span>     <span class="k">if</span> <span class="p">(</span><span class="nx">priority</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">results</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
                <span class="nx">priority</span><span class="o">:</span> <span class="nx">priority</span><span class="p">,</span>
                <span class="nx">article</span><span class="o">:</span> <span class="nx">article</span>
            <span class="p">});</span>
        <span class="p">}</span>

        <span class="k">return</span> <span class="nx">results</span><span class="p">;</span>

    <span class="p">},</span> <span class="p">[]);</span>
<span class="p">}</span>
</code></pre></div>
<p>Finally, I use <a href="https://gomakethings.com/array-sorting-basics-with-vanilla-javascript/">the <code>Array.sort()</code> method</a> to order the <code>results</code> by article priority. Items with the highest <code>priority</code> show up first.</p>

<p>Then, I pass the <code>results</code> into a <code>showResults()</code> method that renders them into the UI.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Search for matches
</span><span class="cm"> * @param  {String} query The term to search for
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">search</span> <span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>

    <span class="c1">// Create a regex for each query
</span><span class="c1"></span> <span class="c1">// ...
</span><span class="c1"></span>
    <span class="c1">// Get and sort the results
</span><span class="c1"></span> <span class="kd">let</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">searchIndex</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">article</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// ...
</span><span class="c1"></span> <span class="p">},</span> <span class="p">[]).</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">article1</span><span class="p">,</span> <span class="nx">article2</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">article2</span><span class="p">.</span><span class="nx">priority</span> <span class="o">-</span> <span class="nx">article1</span><span class="p">.</span><span class="nx">priority</span><span class="p">;</span>
    <span class="p">});</span>

    <span class="c1">// Display the results
</span><span class="c1"></span> <span class="nx">showResults</span><span class="p">(</span><span class="nx">results</span><span class="p">);</span>

<span class="p">}</span>
</code></pre></div>
<h2 id="rendering-search-results">Rendering search results</h2>

<p>Inside the <code>showResults()</code> method, I do a quick check to see if their are any results to show.</p>

<p>If there are, I inject a message into the <code>searchStatus</code> element that shares how many matches were found. This also gets read aloud by screen readers.</p>

<p>Then, I use the <code>results</code> to create an HTML string with the <code>title</code> and a link to the article. The appearance of this varies from one site to another, but you can style it however you want.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Show the search results in the UI
</span><span class="cm"> * @param  {Array}  results The results to display
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">showResults</span> <span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">searchStatus</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="sb">`&lt;p&gt;Found </span><span class="si">${</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="si">}</span><span class="sb"> matching articles&lt;/p&gt;`</span><span class="p">;</span>
        <span class="nx">resultList</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">myTemplate</span><span class="p">(</span><span class="nx">results</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>If there are no <code>results</code>, I clear the <code>resultList</code> element and show a message saying there were no matches.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="cm">/**
</span><span class="cm"> * Show the search results in the UI
</span><span class="cm"> * @param  {Array}  results The results to display
</span><span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">showResults</span> <span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">searchStatus</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="sb">`&lt;p&gt;Found </span><span class="si">${</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="si">}</span><span class="sb"> matching articles&lt;/p&gt;`</span><span class="p">;</span>
        <span class="nx">resultList</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">myTemplate</span><span class="p">(</span><span class="nx">results</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">searchStatus</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'&lt;p&gt;Sorry, no matches were found.&lt;/p&gt;'</span><span class="p">;</span>
        <span class="nx">resultList</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="what-else">What else?</h2>

<p>Tomorrow, I’ll show you how I update the URL with the search query, and run a search automatically on page load if there’s a query in the URL.</p>

<p>This let’s people bookmark searches.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>