some interface work on instant search

5 files changed, 95 insertions, 34 deletions

diff --git a/core/css/styles.css b/core/css/styles.css
index 400108c454d..05546541153 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -23,6 +23,7 @@ form input[type="submit"]:active { outline:0; }
 form input[type="button"], form input[type="text"] { font-size:0.9em; }
 fieldset { padding:1em; background-color:#f7f7f7; border:1px solid #ddd; max-width:600px; margin:2em 2em 2em 3em; }
 legend { padding:0.5em; font-size:1.2em; }
+.template{display:none;}
 
 div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; }
 
diff --git a/core/js/js.js b/core/js/js.js
index fbc014006b0..f85331db60a 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -54,6 +54,10 @@ OC={
 			}else{
 				$.getScript(path);
 			}
+		}else{
+			if(ready){
+				ready();
+			}
 		}
 	},
 	addStyle:function(app,style){
@@ -66,45 +70,16 @@ OC={
 	},
 	search:function(query){
 		if(query){
-			OC.addStyle('search','results');
-			$.getJSON(OC.filePath('search','ajax','search.php')+'?query='+encodeURIComponent(query), OC.search.showResults);
+			OC.addScript('search','result',function(){
+				OC.addStyle('search','results');
+				$.getJSON(OC.filePath('search','ajax','search.php')+'?query='+encodeURIComponent(query), OC.search.showResults);
+			});
 		}
 	}
 }
 OC.addStyle.loaded=[];
 OC.addScript.loaded=[];
 
-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.showResults=function(results){
-	var types=OC.search.catagorizeResults(results);
-	$('#searchresults').remove();
-	var ul=$('<ul id="searchresults"><ul>');
-	for(var name in types){
-		var type=types[name];
-		if(type.length>0){
-			ul.append($('<li class="type">'+name+'</li>'));
-			for(var i=0;i<type.length;i++){
-				var item=type[i];
-				var li=($('<li class="'+name+'"></li>'));
-				li.append($('<a href="'+item.link+'">'+item.name+'</a>'));
-				li.append($('<span class="text">'+item.text+'</span>'));
-				ul.append(li);
-			}
-		}
-	}
-	$('body').append(ul);
-}
-
 if (!Array.prototype.filter) {
 	Array.prototype.filter = function(fun /*, thisp*/) {
 		var len = this.length >>> 0;
@@ -162,7 +137,9 @@ $(document).ready(function(){
 		if(query.length>2){
 			OC.search(query);
 		}else{
-			$('#searchresults').remove();
+			if(OC.search.hide){
+				OC.search.hide();
+			}
 		}
 	});
 	$('#searchbox').click(function(){$('#searchbox').trigger('keyup')});
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>