From 7a103963bafc6670f027bc3d5435ec67f5c06ce6 Mon Sep 17 00:00:00 2001 From: Yader Velasquez Date: Mon, 12 Feb 2024 16:15:09 -0600 Subject: [PATCH] Add new advancedsearch js Support tag autcompletion for two inputs References: https://todo.code.netlandish.com/~netlandish/links/47 --- core/routes.go | 1 + static/css/style.css | 10 +++++++ static/js/advancedsearch.js | 57 +++++++++++++++++++++++++++++++++++++ templates/base.html | 5 +++- templates/link_list.html | 11 ++++--- 5 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 static/js/advancedsearch.js diff --git a/core/routes.go b/core/routes.go index 97dcfd4..45b3d96 100644 --- a/core/routes.go +++ b/core/routes.go @@ -1357,6 +1357,7 @@ func (s *Service) OrgLinksList(c echo.Context) error { pd.Data["include_tags"] = lt.Translate("Include Tags") pd.Data["exclude_tags"] = lt.Translate("Exclude Tags") pd.Data["apply"] = lt.Translate("Apply") + pd.Data["clear"] = lt.Translate("Clear") orgLinks := result.OrgLinks.Result gmap := gobwebs.Map{ "pd": pd, diff --git a/static/css/style.css b/static/css/style.css index 134703b..fc74b13 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -427,6 +427,16 @@ a.bullet-link:before { border-radius: 4px; } +.autocomplete-tags { + padding: 10px; + z-index: 1000; + position: absolute; + background-color: #fff; + width: 250px; + border: 1px solid var(--color-lightGrey); + border-radius: 4px; +} + .tag-suggested { margin-bottom: 5px; cursor: pointer; diff --git a/static/js/advancedsearch.js b/static/js/advancedsearch.js new file mode 100644 index 0000000..b036c10 --- /dev/null +++ b/static/js/advancedsearch.js @@ -0,0 +1,57 @@ +var url = document.querySelector('body').getAttribute('data-autocomplete'); +var tagSelectors = document.querySelectorAll(".tag-selector"); + +function autocomplete() { + tags = this.value.split(",") + tag = tags[tags.length -1].trim() + + autocompleteTags = undefined; + if (this.nextElementSibling && this.nextElementSibling.classList.contains("autocomplete-tags")) { + autocompleteTags = this.nextElementSibling; + } + if (tag !== "") { + fetch(url + "?q=" + tag) + .then(function (response) { + if (!response.ok) { + console.log("Network response was not ok"); + } + return response.json(); + }) + .then(function (data) { + if (data.length > 0) { + var t = ""; + for (var i=0; i < data.length; i++) { + t += '

' + data[i].Name + '

'; + } + if (autocompleteTags !== undefined) { + autocompleteTags.innerHTML = t; + autocompleteTags.classList.remove("d-none"); + } + } + }) + .catch(function (error) { + console.log("Fetch error:", error); + }); + } else { + autocompleteTags.classList.add("d-none"); + } + + tagSelector = this; + autocompleteTags.addEventListener("click", function(event) { + if (event.target.classList.contains("tag-suggested")) { + newTag = event.target.textContent + ", "; + if (tags.length > 1) { + newTag = " " + newTag; + } + tags[tags.length - 1] = newTag; + tagSelector.value = tags.join(","); + autocompleteTags.classList.add("d-none"); + tagSelector.focus(); + } + }); +} + +tagSelectors.forEach(function(tagSelector) { + tagSelector.addEventListener('keyup', autocomplete); +}); + diff --git a/templates/base.html b/templates/base.html index 82ef749..d18fd5a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -12,7 +12,7 @@ - +