<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> Google Ajax search API sample -- smallkonrad </title> <br/> <MCE: script src = "http://www.google.com/jsapi" mce_src = "http://www.google.com/jsapi" <br/> type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script Language = "JavaScript" type = "text/JavaScript"> <! -- <Br/> // to use this search API on a website, you need to add the Google Ajax API loading program URL (http://www.google.com/jsapi) <br/> // This library allows you to use Google. load ('api ', 'version') loads various APIs <br/> Google. load ('search', '1', {"language": "ZH-CN"}); <br/> function onload () <br/>{< br/> // create a search Control <br/> // before trying to use the search control function, always ensure that the main object used in the Google Ajax search API is the searchcontrol instance <br/> var searchcontrol = new Google. search. searchcontrol (); <br/> // Add in a full set of searchers <br/>/* use addsearcher () method: Add sub-objects of the <br/> localsearch, Websearch, videosearch, blogsearch, newssearch, <br/> imagesearch, patentsearch, and booksearch types to the search control, <br/> these searcher objects determine which search services the search Control performs <br/> when adding these searcher objects, you can set the extended mode options. setexpandmode */<br/> Options = new Google. search. searcheroptions (); <br/>/* Google. search. searchcontrol. the expand_mode_partial result is displayed as a subset of the "open" extended mode <br/> Google. search. searchcontrol. expand_mode_open shows the result as full as possible in the object <br/> Google. search. searchcontrol. the expand_mode_close result is hidden from the view, unless it is opened by using a UI element (such as an arrow) */<br/> options. setexpandmode (Google. search. searchcontrol. expand_mode_close); <br/> // projects the search results of a given service to any location on the webpage, which is placed in searchweb. <br/> options. setroot (document. getelementbyid ("searchweb"); <br/> var localsearch = new Google. search. localsearch (); <br/> searchcontrol. addsearcher (localsearch); <br/> // load a searcher with these options, which can be set below, but is not set here <br/> searchcontrol. addsearcher (new Google. search. websearch (), options); <br/> searchcontrol. addsearcher (new Google. search. videosearch (); <br/> searchcontrol. addsearcher (new Google. search. blogsearch (); <br/> searchcontrol. addsearcher (new Google. search. newssearch (); <br/> searchcontrol. addsearcher (new Google. search. imagesearch (); <br/> searchcontrol. addsearcher (new Google. search. booksearch (); <br/> searchcontrol. addsearcher (new Google. search. patentsearch (); <br/> // set website restrictions <br/> var sitesearch = new Google. search. websearch (); <br/> sitesearch. setuserdefinedlabel ("Netease 163 News"); <br/> sitesearch. setuserdefinedclasssuffix ("sitesearch"); <br/> sitesearch. setsiterestriction ("news.163.com"); <br/> searchcontrol. addsearcher (sitesearch, options); <br/> // set the local search center point <br/> localsearch. setcenterpoint ("Nanjing"); <br/> // tell the searcher to draw itself and tell it where to attach <br/> // draw () by default, the search control draws a "linear" layout. <br/> var drawoptions = new Google. search. drawoptions (); <br/> drawoptions. setdrawmode (Google. search. searchcontrol. draw_mode_linear); // linear <br/> // You can also instruct the control to draw a "label layout" <br/> // drawoptions. setdrawmode (Google. search. searchcontrol. draw_mode_tabbed); // tag <br/> // you can separate the "search box" from the search result set. If this parameter is not set, the search box and result are displayed in the same DOM object <br/> drawoptions. setsearchformroot (document. getelementbyid ("searchform"); </P> <p> searchcontrol. draw (document. getelementbyid ("searchresult"), drawoptions); <br/> // execute an inshortsearch <br/> // call the execute () method of the search control, start searching programmatically by passing the search term parameter <br/> searchcontrol.exe cute ("Nanjing Hunan Road "); </P> <p> // establish a keep callback <br/> searchcontrol. setonkeepcallback (this, mykeephandler); <br/>}< br/> function mykeephandler (result) <br/>{< br/> // clone the result HTML node <br/> var node = result.html. clonenode (true); <br/> alert (node. innerhtml); <br/> // attach it <br/> // var savedresults = document. getelementbyid ("saved_results"); <br/> // savedresults. appendchild (node); <br/>}< br/> Google. setonloadcallback (onload); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <div> <br/> <Div id = "searchform" style = "width: 400px; Border: thick groove yellow; "> </div> <br/> <Div style =" float: Left; "mce_style =" float: left; "> <br/> <Div id =" searchresult "style =" width: 400px; Border: thick groove blue; float: left; "> loading </div> <br/> <Div id =" searchweb "style =" width: 400px; Border: thick groove black; float: left; "> loading </div> <br/> </body> <br/> </ptml>
You can customize CSS for a simple example. For more information, see the Class documentation or use firebug.
# Searchweb. GSC-title {color: #330066 ;}< br/># searchweb {background-color: # ccffff ;}< br/>. GSC-resultsheader {font-size: 12pt; color: # cc3300 ;}< br/>. GSC-results. GSC-webresults {color: Gray; backgroud-color: # ccffff ;}< br/> # searchweb. GS-title {color: # 3366cc; font-size: 10pt; font-weight: bold ;}< br/>. GS-snippet {font-size: 9pt; backgroud-color: # ccffff ;}< br/>. GS-snippet B {color: Red ;}< br/> # searchweb. GS-Title B {color: Black ;}< br/> # searchweb. GS-webresult. GS-visibleurl-short {display: None ;}< br/> # searchweb. GS-webresult. GS-visibleurl-long {display: block; color: #003333 ;}
Link:
Google search api reference
Google search AP 'documentation
Google Code Playground
This article from smallkonrad csdn blog, reprinted please indicate the source: http://blog.csdn.net/smallkonrad/archive/2009/07/02/4316257.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
