Hugo Search: an internal search engine (JQuery)

Article published the ; modified the
3 minute(s) to read

This article has 531 words.
RAW source of the article: MD

Description

Adding a function search into static website made with Hugo can be done in differents ways.

We will code this simply with JQuery+UI, in few minutes.

We will use the Hugo variable .Site.Pages, and the JQueryUI method autocomplete().

I assume you known how to add correctly the both JQuery and JQueryUI librairies on your site.

Documentation

Codes

Hugo

To obtain all pages:

Code: hugo

{{- $currentNode := . -}}
{{- $currentNode.Scratch.Set "pages" .Site.Pages -}}
{{- $pages := ($currentNode.Scratch.Get "pages") -}}

We create a variable $pages that contains all pages informations of the site. Now, we include it into the code JQuery:

JQueryUI

As explain into the description section, we use the events of method autocomplete(). We build the variable $projects to iterate over the Hugo variable $pages with the function range Hugo.

The JQuery code:

Code: javascript

$(function() {
    var projects = [
        {{- range $pages -}}
        {{- $url := .Permalink | safeURL -}}
        {{- $title := safeHTML .Title -}}
        {
            value: "{{ $title }}",
            label: "{{ $title }}",
            url:"{{ $url }}"
        },
        {{- end -}}
    ];
    $( "#search" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#search" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#search" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            return false;
        }
    })
    .data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<li>')
        .append('<a href="' + item.url + '" alt="'+ item.label + '">' + item.value + '</a>' )
        .appendTo(ul);
    };
});

HTML

And for the simplest code HTML, we use two elements input as:

Code: html

<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="project-id" type="hidden">
  • the first catch the searched text
  • the second return all found titles, and in the background the equivalent URL.
  • the syntax {{ i18n "searchHolderTitle" }} exists for the multilanguage context on this website; You can replace with your personal text.

TL;DR

The fully code:

Code: html

        <div class="">
            <input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
            <input id="search-return" type="hidden">
            <!-- Javascript -->
                {{- $currentNode := . -}}
                {{- $currentNode.Scratch.Set "pages" .Site.Pages -}}
                {{- $pages := ($currentNode.Scratch.Get "pages") -}}
                <script>
                    $(function() {
                    var projects = [
                        {{- range $pages -}}
                        {{- $url := .Permalink | safeURL -}}
                        {{- $title := safeHTML .Title -}}
                        {
                            value: "{{ $title }}",
                            label: "{{ $title }}",
                            url:"{{ $url }}"
                        },
                        {{- end -}}
                    ];
                    $( "#search" ).autocomplete({
                            minLength: 0,
                            source: projects,
                            focus: function( event, ui ) {
                                $( "#search" ).val( ui.item.label );
                                return false;
                            },
                            select: function( event, ui ) {
                                $( "#search" ).val( ui.item.label );
                                $( "#search-return" ).val( ui.item.value );
                                return false;
                            }
                    })
                    .data('ui-autocomplete')._renderItem = function(ul, item) {
                        return $('<li>')
                        .append('<a href="' + item.url + '" alt="'+ item.label + '">' + item.value + '</a>' )
                        .appendTo(ul);
                    };
                    });
                </script>

            <hr>
        </div>

Voilà !
In few minutes, an “internal search engine” is born on your static website Hugo.

To see a demo, return to the homepage of this site ;)

Others Documentations