some interface work on instant search
This commit is contained in:
Robin Appelman
parent
d2d77b2a48
commit
aa08196c32
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
|
|
@ -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')});
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue