keyboard shortcuts for search results

core/js/js.js

@@ -70,14 +70,18 @@ OC={
 	},
 	search:function(query){
 		if(query){
-			OC.addScript('search','result',function(){
-				OC.addStyle('search','results');
-				$.getJSON(OC.filePath('search','ajax','search.php')+'?query='+encodeURIComponent(query), OC.search.showResults);
+			OC.addStyle('search','results');
+			$.getJSON(OC.filePath('search','ajax','search.php')+'?query='+encodeURIComponent(query), function(results){
+				OC.search.lastResults=results;
+				OC.search.showResults(results);
 			});
 		}
 	}
 }
 OC.search.customResults={};
+OC.search.currentResult=-1;
+OC.search.lastQuery='';
+OC.search.lastResults={};
 OC.addStyle.loaded=[];
 OC.addScript.loaded=[];
 
@@ -133,15 +137,40 @@ $(document).ready(function(){
 			element.attr('src',src.substr(0,src.length-3)+'png');
 		});
 	};
-	$('#searchbox').keyup(function(){
-		var query=$('#searchbox').val();
-		if(query.length>2){
-			OC.search(query);
+	$('form.searchbox').submit(function(event){
+		event.preventDefault();
+	})
+	$('#searchbox').keyup(function(event){
+		if(event.keyCode==13){//enter
+			if(OC.search.currentResult>-1){
+				var result=$('#searchresults tr.result a')[OC.search.currentResult];
+				$(result).click();
+			}
+		}else if(event.keyCode==38){//up
+			if(OC.search.currentResult>0){
+				OC.search.currentResult--;
+				OC.search.renderCurrent();
+			}
+		}else if(event.keyCode==40){//down
+			if(OC.search.lastResults.length>OC.search.currentResult+1){
+				OC.search.currentResult++;
+				OC.search.renderCurrent();
+			}
+		}else if(event.keyCode==27){//esc
+			OC.search.hide();
 		}else{
-			if(OC.search.hide){
-				OC.search.hide();
+			var query=$('#searchbox').val();
+			if(OC.search.lastQuery!=query){
+				OC.search.lastQuery=query;
+				OC.search.currentResult=-1;
+				if(query.length>2){
+					OC.search(query);
+				}else{
+					if(OC.search.hide){
+						OC.search.hide();
+					}
+				}
 			}
 		}
 	});
-	$('#searchbox').click(function(){$('#searchbox').trigger('keyup')});
 });

core/templates/part.searchbox.php

-<form class="searchbox" action="<?php echo $_['searchurl']?>" method="post">
+<form class="searchbox" action="#" method="post">
 	<input id='searchbox' type="search" name="query" value="<?php if(isset($_POST['query'])){echo $_POST['query'];};?>" class="prettybutton" />
 </form>

lib/base.php

@@ -96,6 +96,7 @@ OC_Group::setBackend( OC_Config::getValue( "groupbackend", "database" ));
 OC_Util::addScript( "jquery-1.6.2.min" );
 OC_Util::addScript( "jquery-ui-1.8.14.custom.min" );
 OC_Util::addScript( "js" );
+OC_Util::addScript('search','result');
 OC_Util::addStyle( "jquery-ui-1.8.14.custom" );
 OC_Util::addStyle( "styles" );
 

search/css/results.css

@@ -6,3 +6,4 @@
 #searchresults td.result{width:30em;}
 #searchresults td.result *{cursor:pointer}
 #searchresults td.type{width:7em;text-align:right; border-right:1px solid #aaa;border-bottom:none}
+#searchresults tr.current{background-color:#ddd}

search/js/result.js

@@ -30,12 +30,14 @@ OC.search.showResults=function(results){
 			$(window).click(function(event){
 				OC.search.hide();
 			});
+			OC.search.lastResults=results;
 			OC.search.showResults(results);
 		});
 	}else{
 		var types=OC.search.catagorizeResults(results);
 		$('#searchresults').show();
 		$('#searchresults tr.result').remove();
+		var index=0;
 		for(var name in types){
 			var type=types[name];
 			if(type.length>0){
@@ -46,6 +48,8 @@ OC.search.showResults=function(results){
 				row.find('td.result a').attr('href',type[0].link);
 				row.find('td.result div.name').text(type[0].name);
 				row.find('td.result div.text').text(type[0].text);
+				row.data('index',index);
+				index++;
 				if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here
 					OC.search.customResults[name](row,type[0]);
 				}
@@ -57,6 +61,8 @@ OC.search.showResults=function(results){
 					row.find('td.result a').attr('href',type[i].link);
 					row.find('td.result div.name').text(type[i].name);
 					row.find('td.result div.text').text(type[i].text);
+					row.data('index',index);
+					index++;
 					if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here
 						OC.search.customResults[name](row,type[i]);
 					}
@@ -67,3 +73,11 @@ OC.search.showResults=function(results){
 	}
 }
 OC.search.showResults.loaded=false;
+
+OC.search.renderCurrent=function(){
+	if($('#searchresults tr.result')[OC.search.currentResult]){
+		var result=$('#searchresults tr.result')[OC.search.currentResult];
+		$('#searchresults tr.result').removeClass('current');
+		$(result).addClass('current');
+	}
+}