mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-01-08 10:51:09 +00:00
Code Issues Releases Wiki Activity

Implement category autocomplete

Browse Source 
Loosely based on the one used in Betula
This commit is contained in:
Timur Ismagilov 2023-02-18 23:04:52 +03:00
parent e03d17f9a1
commit a9eeccb9b9
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
categories/view_card.html
View File

@ -21,9 +21,10 @@
{{end}} {{end}}
{{if .GivenPermissionToModify}} {{if .GivenPermissionToModify}}
<li class="categories-card__entry categories-card__add-to-cat"> <li class="categories-card__entry categories-card__add-to-cat">
<form method="POST" action="/add-to-category" class="categories-card__add-form"> <form method="POST" action="/add-to-category" class="categories-card__add-form js-add-cat-form">
<input type="text" name="cat" id="_cat-name" <input type="text" name="cat" id="_cat-name" class="js-add-cat-name"
placeholder="{{block `placeholder` .}}Category name...{{end}}"> placeholder="{{block `placeholder` .}}Category name...{{end}}">
<datalist class="js-add-cat-list" id="cat-name-options"></datalist>
<input type="hidden" name="hypha" value="{{$hyphaName}}"> <input type="hidden" name="hypha" value="{{$hyphaName}}">
<input type="hidden" name="redirect-to" value="/hypha/{{$hyphaName}}"> <input type="hidden" name="redirect-to" value="/hypha/{{$hyphaName}}">
<input type="submit" class="btn categories-card__btn" value="+" <input type="submit" class="btn categories-card__btn" value="+"

26
static/view.js
View File

@ -22,4 +22,28 @@ hamburgerSection.classList.add("top-bar__section", "top-bar__section_hamburger")
hamburgerWrapper.appendChild(hamburger) hamburgerWrapper.appendChild(hamburger)
hamburgerSection.appendChild(hamburgerWrapper) hamburgerSection.appendChild(hamburgerWrapper)
wrapper.appendChild(hamburgerSection) wrapper.appendChild(hamburgerSection);
(async () => {
const input = document.querySelector('.js-add-cat-name'),
datalist = document.querySelector('.js-add-cat-list')
if (!input || !datalist) return;
const categories = await fetch('/category')
.then(resp => resp.text())
.then(html => {
return Array
.from(new DOMParser()
.parseFromString(html, 'text/html')
.querySelectorAll('.mv-category .p-name'))
.map(a => a.innerText);
});
for (let cat of categories) {
let optionElement = document.createElement('option')
optionElement.value = cat
datalist.appendChild(optionElement)
}
input.setAttribute('list', 'cat-name-options')
})();