3 files changed, 23 insertions, 3 deletions
diff --git a/inc/shaarli.css b/inc/shaarli.css
index c4348c70..f5413524 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -221,8 +221,17 @@ h1 {
    margin-left:24px;
 }
+.tagfilter div.awesomplete {
+    width: inherit;
+}
 .tagfilter #tagfilter_value {
-    width: 10%;
+    width: 100%;
+    display: inline;
+}
+.tagfilter li {
+    color: black;
 }
 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
diff --git a/index.php b/index.php
index 9561f63b..021d93ff 100644
--- a/index.php
+++ b/index.php
@@ -2018,6 +2018,7 @@ function buildLinkList($PAGE,$LINKSDB)
    $PAGE->assign('redirector',empty($GLOBALS['redirector']) ? '' : $GLOBALS['redirector']); // Optional redirector URL.
    $PAGE->assign('token',$token);
    $PAGE->assign('links',$linkDisp);
+    $PAGE->assign('tags', $LINKSDB->allTags());
    return;
 }
diff --git a/tpl/linklist.html b/tpl/linklist.html
index 766a80ce..47e67e71 100644
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -1,12 +1,21 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+    <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
+    {include="includes"}
+</head>
 <body>
 <div id="pageheader">
    {include="page.header"}
    <div id="headerform" class="search">
        <form method="GET" class="searchform" name="searchform"><input type="text" 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" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""> <input type="submit" value="Search" class="bigbutton"></form>
+        <form method="GET" class="tagfilter" name="tagfilter">
+            <input type="text" 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="submit" value="Search" class="bigbutton">
+        </form>
    </div>
 </div>
@@ -129,5 +138,6 @@ function showQrCode(caller,loading)
    return false;
 }
 </script>
+<script src="inc/awesomplete.min.js#"></script>
 </body>
 </html>