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, 18 insertions, 0 deletions

diff --git a/templates/public/index.html b/templates/public/index.html
index 60ae442..4af5995 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 %}