Adding custom AJAX search to the Search Module

Super Dev Donkey Joined: May 08, 2009 Posts: 76

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

Blingaholic Joined: Nov 03, 2009 Posts: 25

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]

Super Dev Donkey Joined: May 08, 2009 Posts: 76

very cool, thx Smile

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

Blingaholic Joined: Nov 03, 2009 Posts: 25

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.

Super Dev Donkey Joined: May 08, 2009 Posts: 76

very nice styling Smile

I might as well work here Joined: Nov 16, 2009 Posts: 100

Can we do this in RavenNuke 2.5? I guess it won't be a problem right?

Edit: yes it is possible but Google changed the API key but it is working again.

	Tricked Out News Forum Index -> RavenNuke	All times are GMT - 5 Hours
Page 1 of 1