some interface work on instant search

3 files changed, 83 insertions, 0 deletions

diff --git a/search/css/results.css b/search/css/results.css
new file mode 100644
index 00000000000..61b7cf541c5
--- /dev/null
+++ b/search/css/results.css
@@ -0,0 +1,8 @@
+#searchresults { position:fixed; top:3.3em; right:0; z-index:50; background-color:white; border:1px solid black; margin-bottom:3em; overflow:auto; max-height:80%; width:40em; }
+#searchresults table{ width:100%; table-layout:fixed; top:1em;border-spacing:0}
+#searchresults td{padding-right:0.3em;padding-left:0.3em;vertical-align:top}
+#searchresults td.result div.text{padding-left:1em;}
+#searchresults div.text,div.name{width:30em; white-space:normal}
+#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}
diff --git a/search/js/result.js b/search/js/result.js
new file mode 100644
index 00000000000..b550d4d314d
--- /dev/null
+++ b/search/js/result.js
@@ -0,0 +1,60 @@
+OC.search.catagorizeResults=function(results){
+	var types={};
+	for(var i=0;i<results.length;i++){
+		var type=results[i].type;
+		if(!types[type]){
+			types[type]=[];
+		}
+		types[type].push(results[i]);
+	}
+	return types;
+}
+OC.search.hide=function(){
+	$('#searchresults').hide();
+	if($('#searchbox').val().length>2){
+		$('#searchbox').val('');
+	};
+}
+OC.search.showResults=function(results){
+	if(!OC.search.showResults.loaded){
+		var parent=$('<div/>');
+		$('body').append(parent);
+		parent.load(OC.filePath('search','templates','part.results.php'),function(){
+			OC.search.showResults.loaded=true;
+			$('#searchresults').click(function(event){
+				event.stopPropagation();
+			});
+			$(window).click(function(event){
+				OC.search.hide();
+			});
+			OC.search.showResults(results);
+		});
+	}else{
+		var types=OC.search.catagorizeResults(results);
+		$('#searchresults').show();
+		$('#searchresults tr.result').remove();
+		for(var name in types){
+			var type=types[name];
+			if(type.length>0){
+				var row=$('#searchresults tr.template').clone();
+				row.removeClass('template');
+				row.addClass('result');
+				row.children('td.type').text(name);
+				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);
+				$('#searchresults tbody').append(row);
+				for(var i=1;i<type.length;i++){
+					var row=$('#searchresults tr.template').clone();
+					row.removeClass('template');
+					row.addClass('result');
+					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);
+					$('#searchresults tbody').append(row);
+				}
+			}
+		}
+	}
+}
+OC.search.showResults.loaded=false;
diff --git a/search/templates/part.results.php b/search/templates/part.results.php
new file mode 100644
index 00000000000..9e39a1c2c8b
--- /dev/null
+++ b/search/templates/part.results.php
@@ -0,0 +1,15 @@
+<div id='searchresults'>
+	<table>
+		<tbody>
+			<tr class='template '>
+				<td class='type'></td>
+				<td class='result'>
+					<a>
+						<div class='name'></div>
+						<div class='text'></div>
+					</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>