---
date: 2019-12-06T01:21:00+01:00
description: "Comment intégrer un moteur de recherche dans Hugo, avec JQuery UI autocomplete()"
draft: false
tags: ["Hugo","search","JQuery"]
title: "Hugo Search : un moteur de recherche interne (JQueryUI Autocomplete)"
translationKey: "hugo-jqueryui-autocomplete"
---

## Description

Intégrer une fonction de recherche au sein du site généré par Hugo peut 
se faire de différentes manières.

On va implémenter une manière très simple avec JQuery+UI, et cela nous 
prendra vraiment très peu de temps.

Étant donné  qu'on peut parcourir l'ensemble des pages du site grâce à 
la variable globale `site.Pages`, on va se servir du mécanisme de la 
méthode `autocomplete()` fournie par la bibliothèque JQueryUI, pour 
restituer les différents résultats selon le texte écrit.

Bien sûr, j'assume le fait que vous savez intégrer les appels de scripts 
JQuery et JQueryUI au sein de votre propre site.

## Codes

### JQueryUI

Pour la partie JQuery, nous utilisons la gestion des événements de la 
méthode `autocomplete()`, à la différence près est que la variable 
`projects` va être implémentée par le biais de la fonction Hugo `range`.

Le code JQuery :

```js
<script>
$(function() {
    var projects = [
        {{- range site.Pages -}}
            {{- $url := .RelPermalink -}}
            {{- $title := .LinkTitle -}}
        {
            value: "{{ $title }}",
			label: "{{- if eq $url $baseURL }}{{ site.Params.description }}{{ else if in $url "tags" }}{{- T "pageListTitle" }}{{ $title }}{{ else }}{{- safeHTML .Params.description -}}{{ end -}}",
            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 );
			$("#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>
```

### HTML

Quant à la partie HTML, elle est très simple ; il faut à minima les deux 
éléments `input` suivants :

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

* Le premier élément `input` est celui qui "capte" le texte recherché
* le second va permettre de retourner les informations trouvées.
* La déclaration Hugo `{{ i18n "searchHolderTitle" }}` est juste pour le 
contexte multilangue de ce site ; à remplacer par du texte selon votre goût…

Que vous faites suivre du code Hugo puis du code JQuery

### 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 -}}
    <!-- Javascript -->
<script>
$(function() {
    var projects = [
        {{- range site.Pages -}}
            {{- $url := .RelPermalink -}}
            {{- $title := .LinkTitle -}}
        {
            value: "{{ $title }}",
			label: "{{- if eq $url $baseURL }}{{ site.Params.description }}{{ else if in $url "tags" }}{{- T "pageListTitle" }}{{ $title }}{{ else }}{{- safeHTML .Params.description -}}{{ end -}}",
            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 );
			$("#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>
</div>
```

Et, voilà ! <br>
En quelques minutes, un "moteur de recherche" interne intégré à votre site Hugo.

---

## Démonstration 

Pour ce qui est de la démonstration, c'est ce qu'il y a dans le menu, 
en haut à droite de chacune des pages du site.

---

## Documentations

* La documentation officielle : {{< gohugo n="search" s="tools" >}} - *lien en anglais*
* La fonction Hugo `range` : {{< gohugo n="range" s="functions" >}} - *lien en anglais*
* Inspiré par le [thème Dot](https://themes.gohugo.io/theme/dot-hugo-documentation-theme/) - *(cf : [banner.html](https://github.com/themefisher/dot/blob/master/layouts/partials/banner.html))*
* La méthode JQuery UI `autocomplete()` : https://jqueryui.com/autocomplete - *lien en anglais*
* De plus amples explications sur la méthode `Autocomplete()` de JQueryUI : lire la [documentation](https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm)  - *lien en anglais*
* Une autre méthode de [moteur de recherche interne](https://fr.jeffprod.com/blog/2018/un-moteur-de-recherche-interne-pour-votre-site-hugo/), cette fois-ci avec les bibliothèques VueJS + Axios

---