Improve markup and styling of search results

layouts/articles.html

@@ -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">

output/css/jsonSuggest.css

@@ -1,49 +1,60 @@
-
+ul.jsonSuggestResults {
-div.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 {
+.jsonSuggestResults .resultItem.odd {
-	background-color:#9ADFFE;
+	background-color:#EEE;
 }
-div.jsonSuggestResults div.resultItem.even {
+.jsonSuggestResults .resultItem.even {
 	background-color:#FFFFFF;
 }
 
-div.jsonSuggestResults div.resultItem.hover {
+.jsonSuggestResults .resultItem.hover {
-	background-color:#3399FF;
+  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 {
+.jsonSuggestResults .resultItem strong {
-	font-weight:bold;
+  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 {
+.jsonSuggestResults .resultItem p.extra {
-	font-size: x-small !important;
+  font-size: small !important;
-	position:absolute;
+  font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif;
-	bottom:3px;
-	right: 3px;
 }

output/js/application.js

@@ -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);

output/js/jquery.jsonSuggest-dev.js

@@ -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 />'),
+					var text = resultObjects[i].text;
-						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').
+					var li = $(renderResult({ summary: resultObjects[i].extra }));
+					$('strong', li).html(text);
+
+					li.addClass('resultItem').
 					addClass((bOddRow) ? 'odd' : 'even').
 					click(function(n) { return function() {
 						selectResultItem(resultObjects[n]);
 					};}(i)).
 					mouseover(function(el) { return function() {
 						setHoverClass(el);
-						};}(item));
+					};}(li));
 
-					$(results).append(item);
+					$(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) {