---
date: 2020-08-25T23:32:48+02:00
draft: false
description: "Using the JSON feed to integrate a 'search engine' in Hugo, with JQuery UI autocomplete()"
tags: ["Hugo","search","JQuery","JSON"]
title: "Hugo Search: a 'build-in' search engine (JQueryUI: Autocomplete + JSON)"
translationKey: "hugo-jqueryui-autocomplete-json"
---

## Description

Few months ago, I wrote this first article to build a 'build-in' base search
engine, with JQueryUI `autocomplete()`. (See {{< inside "web/hugo/hugo-search" "" >}})

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

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

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

Make HTML is always so simple:

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

### TL;DR

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

---

Voila!

### Error

{{< abbr Q Question >}}: When you use Hugo into its environment development,
it made severals errors, and stop, as: <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 A Answer >}}: The server is not able to call a data not builded.

----

## Documentations

* {{< gohugo n="search" s="tools" >}}
* Hugo `getJSON` function: {{< gohugo n="data-templates" s="templates" a="load-local-files" >}}
* JQuery UI `autocomplete()` method: https://jqueryui.com/autocomplete

---