Fixes #360 - Auto-complete more than one tag in tag filter field

  * Group awesomplete for multi data in a single JS file.
  * Use it in editlink and linklist.
  * Move awesomplete JS lib at the end of page in editlink.

1 files changed, 24 insertions, 9 deletions

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">
-            <datalist id="tagsList">
-                {loop="$tags"}<option>{$key}</option>{/loop}
-            </datalist>
+            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""
+                   autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+                   data-list="{loop="$tags"}{$key}, {/loop}">
             <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="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>
+                        <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="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>