Hi, all.
On my site, I build feed.json for syndication without any problem…
(I explain how I build this on this article - only in FR)
And I have a search engine builded with JQuery UI autocomplete method.
My last idea was to manage this search engine with Hugo getJSON, as:
<div class="search">
<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="replyer" type="hidden">
{{- $baseURL := (printf "%s%s" $.Site.BaseURL $.Site.Language.Lang) | absLangURL -}}
{{- $feed := (printf "%s%s" $baseURL "/feed.json") | safeURL -}}
<!-- Javascript -->
<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({
delay: 100,
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>
But, when I execute hugo server
, it cant build site with a lot of error messages:
Actualy, to avoid this, I modified my code as:
<div class="search">
<input id="search" class="form-control" placeholder="{{ i18n "searchHolderTitle" }}">
<input id="replyer" type="hidden">
{{- $baseURL := (printf "%s%s" $.Site.BaseURL $.Site.Language.Lang) | absLangURL -}}
{{- $feed := (printf "%s%s" $baseURL "/feed.json") | safeURL -}}
{{- if not (in $baseURL "localhost:1313") -}}
<!-- Javascript -->
<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({
delay: 100,
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 -}}
<hr>
</div>
It’s not possible to use himself JSON into localhost?
One idea, suggestion?