%

Hugo Search : un moteur de recherche interne (JQueryUI: Autocomplete + JSON)

Utiliser le flux JSON pour intégrer un 'moteur de recherche' dans Hugo, avec JQuery UI autocomplete()

Détails relatifs à l'article

Article publié, le
et modifié le
3 minutes de lecture
Cet article contient 536 mots.

Identifiant de l'article : tag:doc.huc.fr.eu.org,2020-08-25:/fr/web/hugo/hugo-search-jqueryui-autocomplete-json

Source brute de l'article :
Commit version : 9bf3d7b

Cet article est aussi disponible sur le protocole Gemini :
gemini://gmi.it-log.fr.eu.org/fr/web/hugo/hugo-search-jqueryui-autocomplete-json.gmi

Description

Il y a quelques mois, j’ai écrit ce premier article pour obtenir un moteur de recherche basique en s’aidant de la méthode autocomplete() de JQueryUI.

Et, puis je me suis rappelé que, parmi les flux de syndication, j’en génère un au format JSON, le bien nommé feed.json, disponible à partir de la page d’accueil. Je me suis demandé si je pouvais réutiliser mon code, et je découvre que notre fameux SSG Hugo a une fonction native getJSON.

Reprenons le code…

Attention

Code

Hugo

Je construis une variable $feed qui injectera la valeur du chemin absolu de mon fichier feed.json.

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

JQuery

La partie du code JQuery est sensiblement la même, à la différence près est que la fonction range d’Hugo va directement appeler le contenu retourné par la fonction getJSON. La suite du traitement est faite par la méthode autocomplete() de JQuery, ni plus ni moins.

Voici le 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

La partie de code HTML est toujours aussi simple :

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

TL;DR

L’ensemble du code :

<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>

Voilà !

Erreur

Q : Lors de la génération en local, vous avez une multitude d’erreur, telle que la suivante et le serveur s’arrête tout seul :

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

R : En environnement local, le serveur n’est pas capable d’appeler une donnée qui n’est pas encore générée.

Documentations

Enjoy-ID!
Enjoy-IT!