%

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

Article publié, le et modifié le
3 minutes de lecture

Cet article contient 547 mots.
Source brute de l'article :
Commit version : 5ed7c38

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 : Hugo Search : un moteur de recherche interne (JQueryUI Autocomplete)

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