Implementujte rozhraní Google AJAX Search API

Buďme upřímní...Funkce vyhledávání WordPress není skvělá. Buďme upřímnější...žádná vyhledávací funkce není lepší než ta od Googlu. Naštěstí pro nás Google poskytuje úžasnou metodu, pomocí které můžeme použít jejich vyhledávání pro naše vlastní stránky:Google AJAX Search API. Dovolte mi, abych vám ukázal, jak implementovat toto úžasné API na svůj vlastní web!

Zobrazit ukázku

Zaregistrujte se!

Google AJAX Search API vyžaduje, abyste se zaregistrovali pro klíč API. Registrace je zdarma a během několika minut budete hotovi s procesem získání klíče.

Budete také muset zadat doménu, pro kterou bude klíč fungovat; jeden klíč na doménu.

HTML

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
	<!-- HTML5 SEARCH BOX!  -->
	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
	<!-- SEARCH davidwalsh.name ONLY! -->
	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
	<!-- SEARCH BUTTON -->
	<input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
<script type="text/javascript">
	google.load('mootools','1.2.4');
	google.load('search','1');
</script>

Budete chtít použít „skutečný“ formulář, takže pokud uživatel nemá JavaScript, bude přesměrován na Google, kde bude hledat. Kromě toho sledujte skrytý vstupní řádek, abyste zajistili, že vaše vyhledávání bude fungovat. Můžete si také všimnout, že vyhledávací pole má atributy automatického doplňování a zástupného symbolu – to jsou funkce HTML5, které nemají nic společného s rozhraním Google AJAX Search API.

CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

Výše uvedené CSS jednoduše umístí prvky tam, kde je chci podle svého návrhu. Dokonce jsem použil trojúhelník CSS!

JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

Výše je značné množství JavaScriptu, takže zůstaňte se mnou. Následují kroky pro implementaci Google AJAX API:

  • Vytvořte prvek pro uložení výsledků vyhledávání.
  • Vytvořte odkaz „Zavřít“, který uživateli umožní zavřít okno s výsledky vyhledávání.
  • Vytvořte naši instanci třídy od Googlu:
    • Vyhledávání na webu (pokud chcete, můžete také vytvořit místní vyhledávání...). možnosti google.search.WebSearch. Rozhodl jsem se přidat karty a nastavit vstup jako vyhledávací pole.
    • Instance SearchControl. možnosti google.search.SearchControl. „siteSearch“ je moje přípona pro výsledky, omezil jsem své vyhledávání na doménu davidwalsh.name a odeslání formuláře spustí zobrazení výsledků v aktuálním okně (místo v novém okně).
    • Instance DrawOptions. možnosti google.search.DrawOptions. S mou instancí DrawOptions jsem nastavil ovládání vyhledávání, nastavil kontejner kreslení s možnostmi, které jsme vytvořili, a rozhodl jsem se použít výchozí zprávu Google „žádné výsledky“

Po vytvoření ovládacích prvků vyhledávání je čas připojit události k vyhledávacímu poli, aby se zobrazil a skryl kontejner s výsledky vyhledávání na základě obsahu vyhledávacího pole. To je vše!

Jak můžete vidět, rozhodl jsem se použít sadu nástrojů JavaScript MooTools (FTW) k vytvoření prvku, který obsahuje výsledky, odkazu "Zavřít" a k navázání událostí na vyhledávací pole. Stejně snadno můžete použít Dojo nebo jQuery pro vytváření prvků a dokonce i pro manipulaci.

Zobrazit ukázku

Upřímně řečeno, nemohl jsem uvěřit, jak snadné bylo implementovat vyhledávání Google AJAX. Je snadné implementovat vyhledávání na váš web, zvláště pokud aktuálně používáte vyhledávání WordPress. Doporučuji věnovat čas implementaci rozhraní Google AJAX Search API – den, který vám zabere jeho zprovoznění, ušetří vašim uživatelům hodiny bolesti!