3 files changed, 62 insertions, 43 deletions
diff --git a/inc/awesomplete-multiple-tags.js b/inc/awesomplete-multiple-tags.js
new file mode 100644
index 00000000..e0f889b1
--- /dev/null
+++ b/inc/awesomplete-multiple-tags.js
@@ -0,0 +1,35 @@
+$ = Awesomplete.$;
+awesomplete = new Awesomplete($('input[data-multiple]'), {
+    filter: function(text, input) {
+        return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
+    },
+    replace: function(text) {
+        var before = this.input.value.match(/^.+ \s*|/)[0];
+        this.input.value = before + text + " ";
+    },
+    minChars: 1
+});
+/**
+ * Remove already selected items from autocompletion list.
+ * HTML list is never updated, so removing a tag will add it back to awesomplete.
+ *
+ * FIXME: This a workaround waiting for awesomplete to handle this.
+ *  https://github.com/LeaVerou/awesomplete/issues/16749
+ */
+function awesompleteUniqueTag(selector) {
+    var input = document.querySelector(selector);
+    input.addEventListener('input', function()
+    {
+        proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
+        reg = /(\w+) /g;
+        while((match = reg.exec(input.value)) !== null) {
+            id = proposedTags.indexOf(match[1]);
+            if(id != -1 ) {
+                proposedTags.splice(id, 1);
+            }
+        }
+        awesomplete.list = proposedTags;
+    });
+}
diff --git a/tpl/editlink.html b/tpl/editlink.html
index 889d913d..14a2e6c8 100644
--- a/tpl/editlink.html
+++ b/tpl/editlink.html
@@ -2,7 +2,6 @@
 <html>
 <head>{include="includes"}
    <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
-    <script src="inc/awesomplete.min.js#"></script>
 </head>
 <body
 {if="$link.title==''"}onload="document.linkform.lf_title.focus();"
@@ -45,40 +44,10 @@
 {include="page.footer"}
 {/if}
 {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
+<script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
 <script>
-    $ = Awesomplete.$;
+    awesompleteUniqueTag('#lf_tags');
-    awesomplete = new Awesomplete($('input[data-multiple]'), {
-        filter: function(text, input) {
-            return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
-        },
-        replace: function(text) {
-            var before = this.input.value.match(/^.+ \s*|/)[0];
-            this.input.value = before + text + " ";
-        },
-        minChars: 1
-    });
-    /**
-     * Remove already selected items from autocompletion list.
-     * HTML list is never updated, so removing a tag will add it back to awesomplete.
-     *
-     * FIXME: This a workaround waiting for awesomplete to handle this.
-     *  https://github.com/LeaVerou/awesomplete/issues/16749
-     */
-    var input = document.querySelector('#lf_tags');
-    input.addEventListener('input', function()
-    {
-        proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
-        reg = /(\w+) /g;
-        while((match = reg.exec(input.value)) !== null) {
-            id = proposedTags.indexOf(match[1]);
-            if(id != -1 ) {
-                proposedTags.splice(id, 1);
-            }
-        }
-        awesomplete.list = proposedTags;
-    });
 </script>
 {/if}
 </body>
diff --git a/tpl/linklist.html b/tpl/linklist.html
index 9ed28853..f6e9e82b 100644
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -9,12 +9,13 @@
    {include="page.header"}
    <div id="headerform" class="search">
        <form method="GET" class="searchform" name="searchform">
-            <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value=""> <input type="submit" value="Search" class="bigbutton"></form>
+            <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value="">
+            <input type="submit" value="Search" class="bigbutton">
+        </form>
        <form method="GET" class="tagfilter" name="tagfilter">
-            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value="" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1">
+            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""
-            <datalist id="tagsList">
+                   autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
-                {loop="$tags"}<option>{$key}</option>{/loop}
+                   data-list="{loop="$tags"}{$key}, {/loop}">
-            </datalist>
            <input type="submit" value="Search" class="bigbutton">
        </form>
        {loop="$plugins_header.fields_toolbar"}
@@ -42,7 +43,9 @@
        {if="$search_type=='tags'"}
            <div id="searchcriteria">{$result_count} results for tags <i>
            {loop="search_crits"}
-                <span class="linktag" title="Remove tag"><a href="?removetag={$value}">{$value} <span class="remove">x</span></a></span>
+                <span class="linktag" title="Remove tag">
+                    <a href="?removetag={$value}">{$value} <span class="remove">x</span></a>
+                </span>
            {/loop}</i></div>
        {/if}
    {/if}
@@ -54,9 +57,17 @@
            <div class="linkcontainer">
                {if="isLoggedIn()"}
                    <div class="linkeditbuttons">
-                        <form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form><br>
+                        <form method="GET" class="buttoneditform">
-                        <form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
+                            <input type="hidden" name="edit_link" value="{$value.linkdate}">
-                        <input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form>
+                            <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
+                        </form><br>
+                        <form method="POST" class="buttoneditform">
+                            <input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
+                            <input type="hidden" name="token" value="{$token}">
+                            <input type="hidden" name="delete_link">
+                            <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
+                                   class="button_delete" onClick="return confirmDeleteLink();">
+                        </form>
                    </div>
                {/if}
                <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span>
@@ -98,5 +109,9 @@
    {include="page.footer"}
 <script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
+<script>
+    awesompleteUniqueTag('#tagfilter_value');
+</script>
 </body>
 </html>