hugo-tag-autocomplete

jump_tag.js

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 = ``;
}

taxonomy.html

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