forked from wezm/wezm.net
Improve markup and styling of search results
This commit is contained in:
Wesley Moore
parent
fa5c2476f2
commit
4e3ea7f599
4 changed files with 63 additions and 40 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue