Improve markup and styling of search results

This commit is contained in:
Wesley Moore 2010-03-19 08:00:09 +11:00
parent fa5c2476f2
commit 4e3ea7f599
4 changed files with 63 additions and 40 deletions

View file

@ -5,7 +5,7 @@
<link rel="stylesheet" href="/css/jsonSuggest.css" type="text/css" media="screen" charset="utf-8" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.jsonSuggest.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.jsonSuggest-dev.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

View file

@ -1,49 +1,60 @@
div.jsonSuggestResults {
ul.jsonSuggestResults {
position:absolute;
border:1px solid #CCC;
padding:0px;
margin:0px 2px;
z-index:1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #FFFFFF;
list-style: none;
}
div.jsonSuggestResults div.resultItem {
.jsonSuggestResults .resultItem {
margin:0px;
padding:5px;
position:relative;
height:auto;
cursor:pointer;
display: block;
}
div.jsonSuggestResults div.resultItem.odd {
background-color:#9ADFFE;
.jsonSuggestResults .resultItem.odd {
background-color:#EEE;
}
div.jsonSuggestResults div.resultItem.even {
.jsonSuggestResults .resultItem.even {
background-color:#FFFFFF;
}
div.jsonSuggestResults div.resultItem.hover {
background-color:#3399FF;
.jsonSuggestResults .resultItem.hover {
background-color: rgb(188, 201, 224);
}
div.jsonSuggestResults div.resultItem img {
.jsonSuggestResults .resultItem img {
float:left;
margin-right:10px;
}
div.jsonSuggestResults div.resultItem p {
.jsonSuggestResults .resultItem p {
margin:0px;
padding:0px;
}
div.jsonSuggestResults div.resultItem p strong {
font-weight:bold;
text-decoration:underline;
.jsonSuggestResults .resultItem strong {
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
font-weight: 200;
color: #111;
display: block;
}
.jsonSuggestResults .resultItem strong em {
font-weight: 500;
font-style: normal;
text-decoration:underline;
}
div.jsonSuggestResults div.resultItem p.extra {
font-size: x-small !important;
position:absolute;
bottom:3px;
right: 3px;
.jsonSuggestResults .resultItem p.extra {
font-size: small !important;
font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif;
}

View file

@ -7,7 +7,7 @@ var WezM = {
$('#search').show();
$('#search input').jsonSuggest(this.articles, {
onSelect: this._searchItemSelected,
width: 400
width: '400px'
});
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
$('#search input').css('paddingTop', 0);

View file

@ -107,7 +107,7 @@
var obj = $(this),
wildCardPatt = new RegExp(regexEscape(settings.wildCard || ''),'g'),
results = $('<div />'),
results = $('<ul></ul>'),
currentSelection, pageX, pageY;
// When an item has been selected then update the input box,
@ -125,12 +125,21 @@
// current set of results and add it only to the given element. We also
// need to set the current selection to the given element here.
function setHoverClass(el) {
$('div.resultItem', results).removeClass('hover');
$('.resultItem', results).removeClass('hover');
$(el).addClass('hover');
currentSelection = el;
}
function renderResult(o) {
return '<li>\n\
<p>\n\
<strong></strong>\n\
' + (Mojo.escape(Mojo.normalize(o.summary))) + '\n\
</p>\n\
</li>';
}
// Build the results HTML based on an array of objects that matched
// the search criteria, highlight the matches if feature is turned on in
// the settings.
@ -143,17 +152,15 @@
$(results).html('').hide();
for (i = 0; i < resultObjects.length; i += 1) {
var item = $('<div />'),
text = resultObjects[i].text;
var text = resultObjects[i].text;
if (settings.highlightMatches === true) {
text = text.replace(filterPatt, "<strong>$1</strong>");
text = text.replace(filterPatt, "<em>$1</em>");
}
$(item).append('<p class="text">' + text + '</p>');
// $(item).append('<p class="text">' + text + '</p>');
if (typeof resultObjects[i].extra === 'string') {
$(item).append('<p class="extra">' + resultObjects[i].extra + '</p>');
// $(item).append('<p class="extra">' + resultObjects[i].extra + '</p>');
}
if (typeof resultObjects[i].image === 'string') {
@ -161,16 +168,19 @@
append('<br style="clear:both;" />');
}
$(item).addClass('resultItem').
addClass((bOddRow) ? 'odd' : 'even').
click(function(n) { return function() {
selectResultItem(resultObjects[n]);
};}(i)).
mouseover(function(el) { return function() {
setHoverClass(el);
};}(item));
var li = $(renderResult({ summary: resultObjects[i].extra }));
$('strong', li).html(text);
$(results).append(item);
li.addClass('resultItem').
addClass((bOddRow) ? 'odd' : 'even').
click(function(n) { return function() {
selectResultItem(resultObjects[n]);
};}(i)).
mouseover(function(el) { return function() {
setHoverClass(el);
};}(li));
$(results).append(li);
bOddRow = !bOddRow;
@ -180,7 +190,7 @@
}
}
if ($('div', results).length > 0) {
if ($('li', results).length > 0) {
currentSelection = undefined;
$(results).show().css('height', 'auto');
@ -285,10 +295,12 @@
$(results).addClass('jsonSuggestResults').
css({
'top': (obj.position().top + obj.height() + 5) + 'px',
'left': obj.position().left + 'px',
'left': (obj.position().left - 10) + 'px',
'width': settings.width || ((obj.width() + 5) + 'px')
}).hide();
console.log((obj.position().left - 15) + 'px');
obj.after(results).
keyup(keyListener).
blur(function(e) {
@ -306,7 +318,7 @@
focus(function(e) {
$(results).css({
'top': (obj.position().top + obj.height() + 5) + 'px',
'left': obj.position().left + 'px'
'left': (obj.position().left - 15) + 'px'
});
if ($('div', results).length > 0) {