Add typeahead dropdown to front page packages search

This uses the existing OpenSearch query endpoint to perform the search
and displays the results accordingly.

Signed-off-by: Dan McGee <dan@archlinux.org>

1 files changed, 25 insertions, 0 deletions

diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css
index 70caf8fc..905a3ecb 100644
--- a/sitestatic/archweb.css
+++ b/sitestatic/archweb.css
@@ -486,6 +486,31 @@ h3 span.arrow {
         border: 1px solid #09c;
     }
 
+    .pkgsearch-typeahead {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1000;
+        display: none;
+        float: left;
+        padding: 0.15em 0.1em;
+        margin: 0;
+        min-width: 10em;
+        font-size: 0.812em;
+        text-align: left;
+        list-style: none;
+        background-color: #f6f9fc;
+        border: 1px solid #09c;
+    }
+
+        .pkgsearch-typeahead li a {
+            color: #000;
+        }
+
+        .pkgsearch-typeahead li.active a {
+            color: #07b;
+        }
+
 /* home: recent pkg updates */
 #pkg-updates h3 {
     margin: 0 0 0.3em;