2 files changed, 28 insertions(+), 3 deletions(-)

M categories/view_card.html
M static/view.js

@@ 21,9 21,10 @@
             {{end}}
             {{if .GivenPermissionToModify}}
 				<li class="categories-card__entry categories-card__add-to-cat">
-					<form method="POST" action="/add-to-category" class="categories-card__add-form">
-						<input type="text" name="cat" id="_cat-name"
+					<form method="POST" action="/add-to-category" class="categories-card__add-form js-add-cat-form">
+						<input type="text" name="cat" id="_cat-name" class="js-add-cat-name"
 						       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="redirect-to" value="/hypha/{{$hyphaName}}">
 						<input type="submit" class="btn categories-card__btn" value="+"

@@ 22,4 22,28 @@ hamburgerSection.classList.add("top-bar__section", "top-bar__section_hamburger")
 
 hamburgerWrapper.appendChild(hamburger)
 hamburgerSection.appendChild(hamburgerWrapper)
-wrapper.appendChild(hamburgerSection)>
\ No newline at end of file
+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')
+})();
+