Closed #47

public_html/media/js/core.js

@@ -1,4 +1,5 @@
-$.fn.hasAttr = function(name) {
+$.fn.hasAttr = function(name)
+{
 	return this.attr(name) !== undefined;
 };
 
@@ -124,4 +125,57 @@ $(window).resize(function()
 	}
 	$('body').data('last-width', $('body').width());
 });
-$(function() { $(window).resize(); });
+$(function()
+{
+	$(window).resize();
+});
+
+
+//autocomplete
+function split(val)
+{
+    return val.split(/\s+/);
+}
+
+function extractLast(term)
+{
+    return split(term).pop();
+}
+
+$(function()
+{
+	var searchInput = $('#top-nav .search input');
+	searchInput
+		// don't navigate away from the field on tab when selecting an item
+		.bind("keydown", function(event)
+		{
+			if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active)
+			{
+				event.preventDefault();
+			}
+		}).autocomplete({
+			minLength: 0,
+			source: function(request, response)
+			{
+				var term = extractLast(request.term);
+				$.get(searchInput.attr('data-autocomplete-url') + '?json', {filter: term}, function(data)
+				{
+					response($.map(data.tags, function(tag) { return { label: tag, value: tag }; }));
+				});
+			},
+			focus: function()
+			{
+				// prevent value inserted on focus
+				return false;
+			},
+			select: function(event, ui)
+			{
+				var terms = split(this.value);
+				terms.pop();
+				terms.push(ui.item.value);
+				terms.push('');
+				this.value = terms.join(' ');
+				return false;
+			}
+		});
+});

src/Controllers/TagController.php

@@ -12,13 +12,23 @@ class TagController
 		PrivilegesHelper::confirmWithException(Privilege::ListTags);
 
 		$dbQuery = R::$f->begin();
-		$dbQuery->select('tag.name, COUNT(1) AS count');
+		$dbQuery->select('tag.*, COUNT(1) AS count');
 		$dbQuery->from('tag');
 		$dbQuery->innerJoin('post_tag');
 		$dbQuery->on('tag.id = post_tag.tag_id');
 		$dbQuery->groupBy('tag.id');
 		$dbQuery->orderBy('LOWER(tag.name)')->asc();
 		$rows = $dbQuery->get();
+		$tags = R::convertToBeans('tag', $rows);
+
+		$suppliedFilter = InputHelper::get('filter');
+		if ($suppliedFilter)
+		{
+			$rows = array_filter($rows, function($row) use ($suppliedFilter)
+			{
+				return strpos(strtolower($row['name']), strtolower($suppliedFilter)) !== false;
+			});
+		}
 
 		$tags = [];
 		$tagDistribution = [];

src/Views/layout-normal.phtml

@@ -85,7 +85,7 @@
 
 					<li class="search">
 						<form name="search" action="<?php echo \Chibi\UrlHelper::route('post', 'list') ?>" method="get">
-							<input type="search" name="query" placeholder="Search&hellip;" value="<?php echo isset($this->context->transport->searchQuery) ? htmlspecialchars($this->context->transport->searchQuery) : '' ?>">
+							<input type="search" name="query" placeholder="Search&hellip;" value="<?php echo isset($this->context->transport->searchQuery) ? htmlspecialchars($this->context->transport->searchQuery) : '' ?>" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/>
 						</form>
 					</li>
 				</ul>