Nouvelle version de la recherche

2010-09-20 11:12:36 +00:00
parent 1e79cafb35
commit 136be98daa
8 changed files with 364 additions and 15 deletions
--- a/js/jquery.search.js
+++ b/js/jquery.search.js
@@ -0,0 +1,184 @@
+$(document).ready(function(){
+
+	var config = {
+		type		: 'web',
+		perPage		: 8,			// A maximum of 8 is allowed by Google
+		page		: 0				// The start page
+	}
+
+	// The small arrow that marks the active search icon:
+	var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
+
+	$('ul.icons li').click(function(){
+		var el = $(this);
+
+		if(el.hasClass('active')){
+			// The icon is already active, exit
+			return false;
+		}
+
+		el.siblings().removeClass('active');
+		el.addClass('active');
+
+		// Move the arrow below this icon
+		arrow.stop().animate({
+			left		: el.position().left,
+			marginLeft	: (el.width()/2)-4
+		});
+
+		// Set the search type
+		config.type = el.attr('data-searchType');
+		$('#more').fadeOut();
+	});
+
+	// Focusing the input text box:
+	$('#s').focus();
+
+	$('#searchForm').submit(function(){
+		googleSearch();
+		return false;
+	});
+
+	function googleSearch(settings){
+
+	// If no parameters are supplied to the function,
+	// it takes its defaults from the config object above:
+
+	settings = $.extend({},config,settings);
+	settings.term = settings.term || $('#s').val();
+
+	// URL of Google's AJAX search API
+	var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+
+					'?v=1.0&callback=?';
+	
+	$.getJSON(apiURL,{
+		q	: settings.term,
+		rsz	: settings.perPage,
+		start	: settings.page*settings.perPage
+	},function(r){
+
+		var results = r.responseData.results;
+		$('#more').remove();
+
+		if(results.length){
+
+			// If results were returned, add them to a pageContainer div,
+			// after which append them to the #resultsDiv:
+
+			var pageContainer = $('<div>',{className:'pageContainer'});
+
+			for(var i=0;i<results.length;i++){
+				// Creating a new result object and firing its toString method:
+				pageContainer.append(new result(results[i]) + '');
+			}
+
+			var cursor = r.responseData.cursor;
+
+			// Checking if there are more pages with results,
+			// and deciding whether to show the More button:
+
+			if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
+				$('<div>',{id:'more'}).appendTo(pageContainer).click(function(){
+					googleSearch({append:true,page:settings.page+1});
+					$(this).fadeOut();
+				});
+			}
+			
+			pageContainer.append('<div class="clear"></div>').hide();
+
+			$.fancybox(
+				$(pageContainer).html(),
+				{
+					'autoDimensions'	: false,
+					'width'         	: 400,
+					'height'        	: 'auto',
+					'showNavArrows'		: false,
+					'transitionIn'		: 'elastic'
+				}
+			);
+			$('#more').click(function(){
+				googleSearch({append:true,page:settings.page+1});
+			});
+		}
+		else {
+			
+			var pageContainer = $('<div>',{className:'pageContainer'});
+			// No results were found for this search.
+
+			$('<p>',{
+				className	: 'notFound',
+				html		: 'No Results Were Found!'
+			}).appendTo(pageContainer);
+			// .hide().appendTo(resultsDiv).fadeIn();
+			$.fancybox(
+				$(pageContainer).html(),
+				{
+					'autoDimensions'	: false,
+					'width'         	: 400,
+					'height'        	: 'auto',
+					'showNavArrows'		: false,
+					'transitionIn'		: 'elastic'
+				}
+			);
+		}
+	});
+}
+
+	function result(r){
+
+		// This is class definition. Object of this class are created for
+		// each result. The markup is generated by the .toString() method.
+
+		var arr = [];
+
+		// GsearchResultClass is passed by the google API
+		switch(r.GsearchResultClass){
+
+			case 'GwebSearch':
+				arr = [
+					'<div class="webResult">',
+					'<h2><a href="',r.url,'">',r.title,'</a></h2>',
+					'<p>',r.content,'</p>',
+					'<a href="',r.url,'">',r.visibleUrl,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GimageSearch':
+				arr = [
+					'<div class="imageResult">',
+					'<a href="',r.url,'" title="',r.titleNoFormatting,
+					'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
+					'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',
+					r.tbHeight,'" /></a>','<div class="clear"></div>',
+					'<a href="',r.originalContextUrl,'">',r.visibleUrl,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GvideoSearch':
+				arr = [
+					'<div class="imageResult">',
+					'<a href="',r.url,'" title="',r.titleNoFormatting,
+					'" class="pic" style="width:150px;height:auto;">',
+					'<img src="',r.tbUrl,'" width="100%" /></a>',
+					'<div class="clear"></div>','<a href="',
+					r.originalContextUrl,'">',r.publisher,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GnewsSearch':
+				arr = [
+					'<div class="webResult">',
+					'<h2><a href="',r.unescapedUrl,'">',r.title,'</a></h2>',
+					'<p>',r.content,'</p>',
+					'<a href="',r.unescapedUrl,'">',r.publisher,'</a>',
+					'</div>'
+				];
+			break;
+		}
+
+		// The toString method.
+		this.toString = function(){
+			return arr.join('');
+		}
+	}
+});