Adding custom AJAX search to the Search Module

Posted: Fri Oct 30, 2009 7:22 am

You'll need a google api key, if I remember right they are universal so if you have a key for maps you can use that, or once you have a key you can use it for any of their stuff..

http://code.google.com/apis/base/signup.html

and you'll need a custom search engine

http://www.google.com/cse/

once you have that not too hard to get going. open modules/Search/index.php
find:

Code:

$pagetitle = '- '._SEARCH;

after add (replace YOUR_API_KEY and YOUR_CUSTOM_SEARCH_ENGINE with your info)

Code:

addJSToHead('http://www.google.com/jsapi?key=YOUR_API_KEY', 'file');
$inlineJS = '<script type="text/javascript">'."\n";
$inlineJS .= 'google.load(\'search\', \'1\');'."\n";
$inlineJS .= 'function OnLoad() {'."\n";
$inlineJS .= 'var customSearchControl = new google.search.CustomSearchControl(\'YOUR_CUSTOM_SEARCH_ENGINE\');'."\n";
$inlineJS .= 'customSearchControl.draw(\'customsearchresults\');'."\n";
$inlineJS .= 'customSearchControl.execute(\''.$query.'\');'."\n";
$inlineJS .= '}'."\n";
$inlineJS .= "google.setOnLoadCallback(OnLoad);\n";
$inlineJS .= '</script>'."\n\n";
addJSToHead($inlineJS, 'inline');

find

Code:

.'<li> <a href="http://www.google.com/search?q='.$query.'" target="new">Google</a></li>'
.'<li> <a href="http://groups.google.com/groups?q='.$query.'" target="new">Google Groups</a></li>'
.'</ul>';
CloseTable();

after add

Code:

OpenTable();
echo '<div id="customsearchresults">Loading...</div>';
CloseTable();

DONE!

unless you want to style the results to match your theme... which was actually harder than adding the code... Sad

google gives the ability to stylize the results, but there about 1000 different classes. I figured out how to stylize everything except the ads that appear sometimes, which load in an iframe so that's a whole different beast.. This ajax search is a beta so they may still be tinkering over at google.

here's the style info i came up with, only seemed to work if you associated it with the div id of your results.. change YOUR_STYLE_HERE to suit your theme:

Code:

#customsearchresults .gs-title * {YOUR_STYLE_HERE}
#customsearchresults .gsc-trailing-more-results * {YOUR_STYLE_HERE}
#customsearchresults .gs-visibleUrl-short {YOUR_STYLE_HERE}
#customsearchresults .gsc-branding-text {YOUR_STYLE_HERE}
#customsearchresults .gsc-tabHeader.gsc-tabhActive {YOUR_STYLE_HERE}
#customsearchresults .gsc-resultsHeader {YOUR_STYLE_HERE}
#customsearchresults input.gsc-input {YOUR_STYLE_HERE}

to see it live in action checkout
http://www.axis-and-allies.com/search.html

and try a search for something like tank or armor which will return alot of results... also works from the nukeNAV modal search window! Smile

think thats it ..... I'll check back later if anyone wants to give this a spin.. btw my custom search engine (CSE) searches a network of related sites, so not all links lead to my site, but you can certainly setup however you please... thats all in the CSE setup

Posted: Sun Nov 15, 2009 10:20 pm

To take advantage of Googles own search templates
Before

Code:

addJSToHead('http://www.google.com/jsapi?key=YOUR_API_KEY', 'file');

ADD

Code:

addCSSToHead('http://www.google.com/cse/style/look/YOUR_TEMPLATE.css','file');

Where YOUR_TEMPLATE is the name of the css file that google provides.

Change the two instances in the previous post of 'yoursutomsearchresults' to 'cse' and your done.[/code]

Posted: Mon Nov 16, 2009 11:31 pm

very cool, thx Smile

there's a "Look and feel" setting in google cse that wasn't there when I did this demo.. Smile

Posted: Fri Nov 20, 2009 9:29 am

Yup!

I decided after writing my post to download their CSS file and include it locally within the Search module after modifying it a little.

Posted: Fri Nov 20, 2009 10:21 am

very nice styling Smile