basic autocomplete support for metatags

ext/autocomplete/script.js

@@ -1,16 +1,36 @@
 $(function(){
+	var metatags = ['order:id', 'order:width', 'order:height', 'order:filesize', 'order:filename'];
+
 	$('[name=search]').tagit({
 		singleFieldDelimiter: ' ',
 		beforeTagAdded: function(event, ui) {
-			// give special class to negative tags
-			if(ui.tagLabel[0] === '-') {
-				ui.tag.addClass('tag-negative');
-			}else{
-				ui.tag.addClass('tag-positive');
+			if(metatags.indexOf(ui.tagLabel) !== -1) {
+				ui.tag.addClass('tag-metatag');
+			} else {
+				console.log(ui.tagLabel);
+				// give special class to negative tags
+				if(ui.tagLabel[0] === '-') {
+					ui.tag.addClass('tag-negative');
+				}else{
+					ui.tag.addClass('tag-positive');
+				}
 			}
 		},
 		autocomplete : ({
 			source: function (request, response) {
+				var ac_metatags = $.map(
+					$.grep(metatags, function(s) {
+						// Only show metatags for strings longer than one character
+						return (request.term.length > 1 && s.indexOf(request.term) === 0);
+					}),
+					function(item) {
+						return {
+							label : item + ' [metatag]',
+							value : item
+						};
+					}
+				);
+
 				var isNegative = (request.term[0] === '-');
 				$.ajax({
 					url: base_href + '/api/internal/autocomplete',
@@ -18,13 +38,17 @@ $(function(){
 					dataType : 'json',
 					type : 'GET',
 					success : function (data) {
-						response($.map(data, function (count, item) {
-							item = (isNegative ? '-'+item : item);
-							return {
-								label : item + ' ('+count+')',
-								value : item
-							};
-						}));
+						response(
+							$.merge(ac_metatags,
+								$.map(data, function (count, item) {
+									item = (isNegative ? '-'+item : item);
+									return {
+										label : item + ' ('+count+')',
+										value : item
+									};
+								})
+							)
+						);
 					},
 					error : function (request, status, error) {
 						alert(error);

ext/autocomplete/style.css

@@ -6,3 +6,4 @@ input[name=search] ~ input[type=submit] { display: inline-block !important; }
 
 .tag-negative { background: #ff8080 !important; }
 .tag-positive { background: #40bf40 !important; }
+.tag-metatag   { background: #eaa338 !important; }