some interface work on instant search

diff --git a/core/css/styles.css b/core/css/styles.css
index 400108c454d2a836d2b386722482855fd0a8252b..05546541153f5b1f78e2e9f8252ae20cdbca7f69 100644 (file)
--- 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 fbc014006b067258fe08e32387a8a109a23a3467..f85331db60a60fe61716648834f140c8345efb06 100644 (file)
--- 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 (file)
index 0000000..61b7cf5
--- /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 (file)
index 0000000..b550d4d
--- /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 (file)
index 0000000..9e39a1c
--- /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>