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>

2 files changed, 43 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;
diff --git a/templates/public/index.html b/templates/public/index.html
index 60ae442d..4af5995e 100644
--- a/templates/public/index.html
+++ b/templates/public/index.html
@@ -215,4 +215,22 @@
 
 </div>
 {% endcache %}
+
+{% load cdn %}{% jquery %}
+<script type="text/javascript" src="{% static "bootstrap-typeahead.js" %}"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#pkgsearch-field').typeahead({
+        source: function(query, callback) {
+            $.getJSON('/opensearch/packages/suggest', {q: query}, function(data) {
+                callback(data[1]);
+            });
+        },
+        matcher: function(item) { return true; },
+        sorter: function(items) { return items; },
+        menu: '<ul class="pkgsearch-typeahead"></ul>',
+        items: 10
+    }).attr('autocomplete', 'off');
+});
+</script>
 {% endblock %}