Skip to content

Instantly share code, notes, and snippets.

@Umio-Yasuno
Last active April 18, 2021 03:21
Show Gist options
  • Save Umio-Yasuno/0a3885bcfa5233084b59dd1e649ded0a to your computer and use it in GitHub Desktop.
Save Umio-Yasuno/0a3885bcfa5233084b59dd1e649ded0a to your computer and use it in GitHub Desktop.
hugo-tag-autocomplete
function jump_tag(e) {
if (e.key != `Enter` && e.type != `click`)
return;
const tag_val = document.getElementById(`input-tag-comple`).value
.trim().replace(/\s+/, ` `);
if (tag_val == ``)
return;
const list = document.getElementById(`tags-list`);
const selector = list.querySelector(`[value="${tag_val}"]`);
if(!selector) {
const err_msg = document.getElementById(`tag-comple-error`);
const wrong_tag = ( () => {
if (25 <= tag_val.length)
return `${tag_val.substring(0, 25)}...`;
else
return tag_val
})();
err_msg.innerHTML = `"${wrong_tag}" not found`;
err_msg.classList.add(`toast-err`);
setTimeout( () => {
err_msg.classList.remove(`toast-err`);
}, 2000);
return;
}
const url = `/tags/${selector.dataset.url}/`;
/* maybe not need fetch check */
fetch(url, { method: `HEAD` ,
referrerPolicy: `no-referrer` })
.then( (response) => {
if (response.ok)
location.href = url;
});
}
function clear_value() {
return document.getElementById(`input-tag-comple`).value = ``;
}
<!-- <theme>/layout/tag/taxonomy.html -->
<!-- ~~~ -->
<div class="tag-comple">
<input type="text" list="tags-list" size="20" id="input-tag-comple" autocomplete="on" onkeydown="jump_tag(event)" tabindex="0">
<datalist id="tags-list">
{{- range .Pages.ByTitle -}}
<option value="{{ .Title }}" data-url="{{- path.Base .RelPermalink -}}" />
{{- end -}}
</datalist>
<div id="tag-comple-error" aria-hidden="true"></div>
<button type="button" class="sb jmp_b" onclick="jump_tag(event)" tabindex="0">Enter</button>
<button type="button" class="sb clr_b" onclick="clear_value()" tabindex="0">Clear</button>
</div>
<!-- ~~~ -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment