%

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

Article published the ; modified the
3 minutes to read

This article has 591 words.
RAW source of the article:
Commit version : e21600e

Description

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

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 := (printf "%s%s/" $.Site.BaseURL $.Site.Language.Lang) | absLangURL -}}
{{- $feed := (printf "%s%s" $baseURL "/feed.json") | safeURL -}}

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:

Code: javascript

$(function() {
    var projects = [
		{{- with getJSON $feed -}}
		{{- range .items -}}
		{{- $url := safeURL .url -}}
		{{- $title := safeHTML .title -}}
		{{- $desc := safeHTML .summary -}}  
		{
			value: "{{ $title }}",
			label: "{{ $desc }}",
			url:"{{ $url }}"		
		},
		{{- end -}}
		{{- 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);
    };
});

HTML

Make HTML is always so simple:

Code: html

<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="replyer" type="hidden">

TL;DR

File: html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

{{- $baseURL := (printf "%s%s/" $.Site.BaseURL $.Site.Language.Lang) | absLangURL -}}
{{- $feed := (printf "%s%s" $baseURL "/feed.json") | safeURL -}}
{{- if not (in $baseURL "localhost:1313") -}}
<div class="search">
	<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
	<input id="replyer" type="hidden">                
	<script>
		$(function() {
            var projects = [
            {{- with getJSON $feed -}}
            {{- range .items -}}
            {{- $url := safeURL .url -}}
            {{- $title := safeHTML .title -}}
            {{- $desc := safeHTML .summary -}}              
            {
                value: "{{ $title }}",
                label: "{{ $desc }}",
                url:"{{ $url }}"
            },
            {{- end -}}
            {{- 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>		
	<hr>
</div>
{{- end -}}

Explains :

The most astute will notice a detail that has its importance:

  • look the line 3: a condition check if Hugo is on its environment development.
    In this case, the code is not builded.
    (See section Error for more informations)

Try on the homepage, to see the result…

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. Its the reason why on the final script, there is one condition to check the environment.

Documentations