From a0c3df96f3eb9bca83ac379e46c8b61dbac66ac8 Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Thu, 21 Jan 2021 06:37:55 +0100
Subject: [PATCH] Auto-complete tags.

Read tags from tags.lst and offer them as auto-completions. Use one text
field per tag and use a button to add new fields.
---
 index.php | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/index.php b/index.php
index 8075803..afbc3f0 100644
--- a/index.php
+++ b/index.php
@@ -31,7 +31,7 @@
       {
         padding: 0;
       }
-      input[type=file]
+      input[type=file], input[list=list_tags]
       {
         margin-left: 10ch;
       }
@@ -198,15 +198,15 @@
       don't want trust to be necessary to use this list.
     </p>
 
-    <form method="post" action="/add" enctype="multipart/form-data">
+    <form method="post" action="/add" enctype="multipart/form-data" id="form_add">
       <label for="instance">Instance:</label>
       <input type="text" id="instance" name="instance" placeholder="example.com" required>
       <span class="hint">(Without the “https://”)</span>
       <br>
 
-      <label for="tags">Tags:</label>
-      <input type="text" id="tags" name="tags" placeholder="tag1,tag2" autocomplete="on" required>
-      <!-- <input type="button" id="add_tag" value="➕" disabled> -->
+      <label for="tags">Tags:</label><span class="hint">(One tag per field or comma separated)</span><br>
+      <input type="text" list="list_tags" id="tags" name="tags[]" required>
+      <input type="button" id="add_tag" value="➕" onclick="javascript:add_input_tag();">
       <br>
 
       <label for="receipts">Receipts:</label>
@@ -261,5 +261,36 @@
       <a href="https://schlomp.space/FediBlock">Sourcecode</a> licensed under the
       <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0-only</a>.
     </p>
+
+    <script>
+     function add_input_tag()
+     {
+         const input_text = document.createElement("input");
+         input_text.setAttribute("type", "text");
+         input_text.setAttribute("list", "list_tags");
+         input_text.setAttribute("name", "tags[]");
+
+         const form = document.getElementById("form_add");
+         const btn = document.getElementById("add_tag");
+         form.insertBefore(document.createElement("br"), btn);
+         form.insertBefore(input_text, btn);
+         input_text.focus();
+     }
+    </script>
+
+    <datalist id="list_tags">
+      <?php
+      $file = fopen("tags.lst", "r") or die("Unable to open autocompletion file.");
+      while(!feof($file))
+      {
+          $tag = rtrim(fgets($file));
+          if ($tag != "")
+          {
+              printf("<option value=\"%s\">\n", $tag);
+          }
+      }
+      fclose($file);
+      ?>
+    </datalist>
   </body>
 </html>