GW2 Forum search fix using the Google custom search engine (WIP)

gw2-forumsearch.css

#search-container{
	padding: 0 3% 0 3%;
	background: #fff;
}

#search-text{
	border: 1px solid #B2B2B2;
	box-shadow: #B2B2B2 0 0 9px inset;
	font-size: 22px;
	margin: 2px 0 15px;
	font-family: CronosPro, serif;
	line-height: 1;
	padding: 4px 30px 2px 9px;
	color: #959494;
	width: 300px;
	background: url(https://d1r2pgr9caw5gy.cloudfront.net/assets/global_search_icon-74bb159503c4f1df94cb0ce26a93b372.png) 97% 50% no-repeat #EFEFEF;
}

#search-submit{
	border: 1px solid #B2B2B2;
	box-shadow: #B2B2B2 0 0 9px inset;
	font-size: 22px;
	font-family: CronosPro, serif;
	padding: 4px 9px 2px;
	color: #959494;
	background: #EFEFEF;
}

#load-more{
	cursor: pointer;
	background: #EEE;
	text-align: center;
	padding: 0.5em;
	text-transform: uppercase;
}

#result-container b{
	 font-weight: bold;
}

div#google-results > div{
	margin-bottom: 0.75em;
}

div#google-results > div > div{
	font-size: 100%;
	margin-bottom: 0.25em;
}

div#google-results > div > div.title{
	font-size: 120%;
}

div#google-results > div > div.formatted-url > a{
	color: #D97373;
}

div#google-results > div > div.snippet{
	color: #c6c6c6;
}

div#google-results > div > div.title > a{
	color: #000;
}

div#google-results > div > div.title > a:visited{
	color: #737373;
}

gw2-forumsearch.js

// ==UserScript==
// @name         GW2 Forum search fix
// @namespace    https://forum-en.guildwars2.com/
// @version      0.1
// @description  fixes the broken search bar and replaces it with google custom search
// @include      /^https://forum-(de|en|es|fr)\.guildwars2\.com/.*$/
// @copyright    2014, Smiley
// ==/UserScript==

(function(j, d){

	// https://cloud.google.com/console/start/api?id=customsearch&credential=client_key
	// -> browser key -> referer URL: *.guildwars2.com/*
	var apiKey = 'YOUR_API_KEY';

	// https://www.google.com/cse/create/new
	// -> URL: *.guildwars2.com/forum*
	var engineKey = 'YOUR_SEARCH_ENGINE_KEY';


	var googleSearch = function(text, start){

		// https://developers.google.com/custom-search/json-api/v1/reference/cse/list
		var url = 'https://www.googleapis.com/customsearch/v1?' +
			'key='+apiKey+
			'&cx='+engineKey+
			'&q='+encodeURIComponent(text)+
			'&siteSearch='+encodeURIComponent(d.location.href)+
			'&start='+(start || 1);

		j.getJSON(url, function(data){

			if(data.queries.nextPage[0] && data.queries.request[0]){
				// bind some values to the "load more" button
				j('#load-more').data({
					start: data.queries.nextPage[0].startIndex,
					searchtext: data.queries.request[0].searchTerms,
					total: data.queries.request[0].totalResults
				});
			}

			if(data.items && data.items.length){
				// okay, we got result, so loop through and show them (easy, eh?)
				j.each(data.items, function(i, item){
					$('#google-results').append(
						'<div class="result-row">' +
						'<div class="title"><a href="'+item.link+'">'+item.htmlTitle+'</a></div>' +
						'<div class="formatted-url"><a href="'+item.link+'">'+item.htmlFormattedUrl+'</a></div>' +
						'<div class="snippet">'+item.htmlSnippet+'</div>' +
						'</div>'
					);
				});
				j('#result-container').show();
			}
			else{
				j('#load-more').hide();
			}

		}).fail(function(){
			// yada yada yada
		});

	};

	// some brute force to kill the event listeners attached by jQuery.live() just in case...
	// http://api.jquery.com/live/
	j(d).off('keyup keydown change submit');

	// more brute force to remove the broken search forms
	j('.searchy').each(function(){
		this.remove();
	});

	// add an all new search box right below the top breadcrumbs
	j('#content').before(
		'<div id="search-container">' +
			'<form id="search" style="text-align: right;">' +
				'<input autocomplete="off" id="search-text" name="search-text" type="text" placeholder="Search the forums..." />' +
				'<button id="search-submit" type="submit">Go!</button>' +
			'</form>' +
			'<div id="result-container" style="display: none;">' +
				'<div id="google-results"></div>' +
				'<div id="load-more">load more</div>' +
			'</div>' +
		'</div>'
	);

	// apply some magick to the search form
	j('#search').submit(function(e){
		e.preventDefault();
		googleSearch(j('#search-text').val());
	});

	// a "load more" button because paginations are boring XD
	j('#load-more').click(function(){
		var data = j(this).data();
		if(data.searchtext !== '' && (data.start + 10) < data.total){
			googleSearch(data.searchtext, data.start);
		}
	});

})(jQuery, document);