---
date: 2020-08-25T23:32:48+02:00
draft: false
description: "Utiliser le flux JSON pour intégrer un 'moteur de recherche' dans Hugo, avec JQuery UI autocomplete()"
tags: ["Hugo","search","JQuery","JSON"]
title: "Hugo Search : un moteur de recherche interne (JQueryUI: Autocomplete + JSON)"
translationKey: "hugo-jqueryui-autocomplete-json"
---

## 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 : {{< inside "web/hugo/hugo-search-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 {{< abbr SSG "Static Site Generator" >}} 
Hugo a une fonction native `getJSON`. 

Reprenons le code…

{{< note warning >}}
Ne fonctionne pas en environnement de développement !
{{</note>}}

## Code

### Hugo 

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

```hugo
{{- $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 : 

```js
{{- 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 : 

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

### TL;DR

L'ensemble du code : 

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

{{< abbr Q Question >}} : 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 : <br>
`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`

{{< abbr R Réponse >}} : En environnement local, le serveur n'est pas 
capable d'appeler une donnée qui n'est pas encore générée. 

----

## Documentations

* La documentation officielle : {{< gohugo n="search" s="tools" >}} - *lien en anglais*
* La fonction Hugo `getJSON` : {{< gohugo n="data-templates" s="templates" a="load-local-files" >}} - *lien en anglais*
* La méthode JQuery UI `autocomplete()` : https://jqueryui.com/autocomplete - *lien en anglais*

---