%

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

Article published the ; modified the
3 minutes to read

This article has 431 words.
RAW source of the article:
Commit version: 5ed7c38

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 := site.BaseURL | absLangURL -}}
{{- $feed :=  urls.JoinPath $baseURL "/feed.json" | absLangURL -}}

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:

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

Make HTML is always so simple:

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

TL;DR

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

Voila!

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.

Documentations