%

Hugo Search: a 'build-in' search engine (JQueryUI: Autocomplete + JSON)

Using the JSON feed to integrate a 'search engine' in Hugo, with JQuery UI autocomplete()

Details about this article

Article published the
; modified the
3 minutes to read
This article has 432 words.

Uniq IDentifiant: tag:doc.huc.fr.eu.org,2020-08-25:/en/web/hugo/hugo-search-jqueryui-autocomplete-json

RAW source of the article:
Commit version: 9bf3d7b

This article is also available on Gemini Protocol:
gemini://gmi.it-log.fr.eu.org/en/web/hugo/hugo-search-jqueryui-autocomplete-json.gmi

Description

Few months ago, I wrote this first article to build a ‘build-in’ base search engine, with JQueryUI autocomplete(). (See Hugo search)

On this blog, Hugo generates one feed at the JSON format, named feed.json, available on the homepage. And, Hugo has a native function getJSON…

Let’s go back to the code !

Code

Hugo

Firstly, I write a $feed variable; her value is the absolute path for the file feed.json.

{{- $baseURL := site.BaseURL | absLangURL -}}
{{- $feed :=  urls.JoinPath $baseURL "/feed.json" | absLangURL -}}

JQuery

JQuery code is quasi the same: except this difference, Hugo’s range function will directly call the content returned by the getJSON function.

The code:

{{- with resources.Get $feed -}}
<!-- Javascript -->
<script>
$(function() {
    var projects = [
        {{- range .items -}}
        {
            value: "{{ safeHTML .title }}",
            label: "{{ safeHTML .summary }}",
            url:"{{ safeURL .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 );
            $("#replyer").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>
{{- end -}}

HTML

Make HTML is always so simple:

<input class="form-control" id="search" placeholder="{{ T "searchHolderTitle" }}">
<input aria-hidden="true" id="replyer" class="hidden">

TL;DR

<div id="search">
    <input class="form-control" id="search" placeholder="{{ T "searchHolderTitle" }}">
    <input aria-hidden="true" id="replyer" class="hidden">
    {{- $baseURL := site.BaseURL | absLangURL -}}
    {{- $feed :=  urls.JoinPath $baseURL "/feed.json" | absLangURL -}}
    {{- with resources.Get $feed -}}
    <!-- Javascript -->
    <script>
$(function() {
    var projects = [
        {{- range .items -}}
        {
            value: "{{ safeHTML .title }}",
            label: "{{ safeHTML .summary }}",
            url:"{{ safeURL .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 );
            $("#replyer").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>
    {{- end -}}
</div>

Voila!

Error

Q : When you use Hugo into its environment development, it made severals errors, and stop, as:
ERROR 2020/08/27 08:16:41 Failed to get JSON resource “http://localhost:1313/fr/feed.json”: Get “http://localhost:1313/fr/feed.json”: dial tcp [::1]:1313: connect: connection refused

A : The server is not able to call a data not builded.

Documentations

Enjoy-ID!
Enjoy-IT!