Google Ajax Search

By | September 10, 2015
0
0



Here is some code you can use to add Google’s search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

 

You’ll need an API key from Google. They are freely available for non-commercial applications.
General Google Search:

01 <!DOCTYPE html>
02
03 <head>
04
05 <meta charset="utf-8" />
06
07
08
09         <title>My GAjax Search</title>
10
11         <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
12
13
14
15         <script language="Javascript" type="text/javascript">
16
17         //<![CDATA[
18
19
20
21         function OnLoad() {
22
23         // Create a search control
24
25         var searchControl = new GSearchControl();
26
27
28
29         // create a search object
30
31         searchControl.addSearcher(new GwebSearch());
32
33         // tell Google where to draw the searchbox
34
35         searchControl.draw(document.getElementById("search-box"));
36
37
38
39         }
40
41         GSearch.setOnLoadCallback(OnLoad);
42
43
44
45         //]]>
46
47
48
49         </script>
50
51     </head>
52
53 <body>
54
55
56
57         <!-- Search box -->
58
59
60
61         <div id="search-box">
62
63
64
65         </div>
66
67
68
69 </body>
70
71 </html>

Site Specific Google Search:

view source

print?

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04
05
06
07     <head>
08
09         <title>My GAjax Site Search</title>
10
11         <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
12
13
14
15
16
17
18
19         <script language="Javascript" type="text/javascript">
20
21         //<![CDATA[
22
23
24
25         function OnLoad() {
26
27         // Create a search control
28
29         var searchControl = new GSearchControl();
30
31
32
33         // create a search object
34
35         var siteSearch = new GwebSearch();
36
37         siteSearch.setUserDefinedLabel("YourSite");
38
39         siteSearch.setUserDefinedClassSuffix("siteSearch");
40
41         siteSearch.setSiteRestriction("example.com");
42
43         searchControl.addSearcher(siteSearch);
44
45         // tell Google where to draw the searchbox
46
47         searchControl.draw(document.getElementById("search-box"));
48
49
50
51         }
52
53         GSearch.setOnLoadCallback(OnLoad);
54
55
56
57         //]]>
58
59         </script>
60
61     </head>
62
63     <body>
64
65
66
67         <!-- Search box -->
68
69
70
71         <div id="search-box">
72
73
74
75         </div>
76
77
78
79     </body>
80
81 </html>

Leave a Reply

Your email address will not be published. Required fields are marked *