1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
Building a site search engine is pain and unless you're handy at writing algorithms, yours probably isn't going to be that great, even after all your hard work. So why bother? Especially when there's already a reasonably popular search engine by the name of Google that's perfectly willing to handle the job for you.
The [http://code.google.com/apis/ajaxsearch/ Google Search API] is not only really good at searching, since it accesses the Google index, but it's also really easy to use.
The mashup potential here is near limitless, but we'll confine ourselves to a much more common case -- a site specific search engine for your blog.
== Getting Started ==
The first step is to get a Google Search API. Just login to your Google account and head over the application page. Tell Google the domain where you'll be using the Search API and then copy and paste your key, we'll need it in just a minute.
First, just to ensure there's no confusion, the only search API from Google uses AJAX. There was an older SOAP-based API, but sadly, that's no longer available. You might still run across a few SOAP-based implementation since Google hasn't shut it down, but it doesn't hand out new keys.
The other thing to keep in mind is that if you're launching a new site, the site-specific results won't exist, since Google probably hasn't crawled the URL yet. If you don't have one, set up a Google Webmaster accounts and tell Google about your site by creating a sitemap. That should speed up the indexing process though you will likely still have to wait a few days before a Google search returns anything.
== Implementing The Basic Search Engine ==
The first thing to do if open up your site template and add this line to the head tags:
<code>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
</code>
Paste in that API key you generated earlier and you're ready to go. For now we're going to write all our code in the page head tags, but if you end up with a long and complex script it's a better idea to break it out in its own file.
<code>
<script language="Javascript" type="text/javascript">
//<![CDATA[
function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
// create a search object
searchControl.addSearcher(new GwebSearch());
// tell Google where to draw the searchbox
searchControl.draw(document.getElementById("search-box"));
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</code>
What we've done here is create a function that fires when the page loads and creates a new GSearchControl object which is a text input box and a search button (there's also a little "powered by Google" badge). We then create a searcher, in this case we're just using a normal GwebSearch, which mimics the Google homepage.
Other options include video search, image search, blog search and several other of Google's specialized search engines. For more details check out the [http://code.google.com/apis/ajaxsearch/documentation/reference.html#_intro_GSearch Search Docs].
Once we have the object initialized and the type of search set we have to tell Google where to draw the object. In this case we'll use a div with an id of "search-box," so add this code somewhere in the body of you html file:
<code>
<div id="search-box">
</div>
</code>
That's all there is to it, your users can now search Google without leaving your page. But that's not exactly what we want, read on to find out how we can limit the search to just your site.
== Site Specific Search Engine ==
To restrict the results to just your domain we need to create a site restriction. To do that we're going to change this line:
<code>searchControl.addSearcher(new GwebSearch());</code>
To this:
<code>
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("YourSite");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("example.com");
searchControl.addSearcher(siteSearch);
</code>
Just fill in your site name and url and you're done. Give it a shot and you should see results limited to your domain (assuming Google has indexed it already)
One thing to note, you can string together as many of these site search as you'd like and use the setUserDefinedClassSuffix to add a different class to each domain which makes it possible to do some fancy CSS work to, for instance, color code your results by domain.
You can also create a search using a custom search engine if you have one defined. See the Search Docs for more details.
== Where to go From Here ==
We've really just scratched the surface of what you can do with the AJAX Search API, so definitely read through the documentation and have a look at some of the example. Mashup potentials abound, especially using some the specialized search engines like local search or video.
Other options include the ability to control most of the look and feel via stylesheets, the ability to search Google Books to find quotes for your blog and more.
If even this is just too much code, you can always use the handy [http://code.google.com/apis/ajaxsearch/wizards.html Ajax Search Wizards] to generate some cut and paste code that will perform basic searches.
|
