I recently had to integrate search capabilities into a website I worked on. I chose to use the Google AJAX Search API. I needed the form field display to be very customized and clean. I do leverage the Dojo Javascript Toolkit to help with the boilerplate DOM and event stuff.
The first thing you need to do is sign up for a new key:
Once you get the key, you’re ready to start coding your own custom search form.
Begin by adding the the following to your <head> tag:
<script src="http://www.google.com/jsapi?key=<KEY GOES HERE>" type="text/javascript"></script>
Since my example uses Dojo, you need to include Dojo for my code to work. If you don’t already use Dojo, you can simply include it by adding the following to the <head>:
<script src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" type="text/javascript"></script>
Next we need to add our code that performs the search. First tell the Google API to load the search API:
<script type="text/javascript">
google.load("search", "1", {"nocss":true,"nooldnames":true});
Next we need to initialize our page when the page loads:
dojo.addOnLoad(function(){
var results = dojo.byId("results");
var cursor = dojo.byId("cursor");
var ws = new google.search.WebSearch();
ws.setNoHtmlGeneration();
Be sure to set the domain you want to search. The LARGE_RESULTSET will return the maximum number of results Google allows, which is usually 8 results.
ws.setSiteRestriction("example.com");
ws.setResultSetSize(google.search.Search.LARGE_RESULTSET);
Next we need to tell the WebSearch object the function we want called after the results are returned. The 3rd argument to setSearchCompleteCallback() is an array with a reference to our WebSearch instance. This array gets passed to our callback function when the callback is fired.
ws.setSearchCompleteCallback(null, function(w){
if(!w.results){return;}
results.innerHTML = "";
cursor.innerHTML = "";
var d = dojo.doc.createElement("div");
results.appendChild(d);
for(var i=0,len=w.results.length; i<len; i++){
var r = w.results[i];
Our WebSearch object has a createResultHtml() function that creates an the DOM nodes of our result, but it adds a bunch of crap and forces the result to open in a new window. So, to fix that, we use Dojo to go clean up the nodes before adding them to the page.
w.createResultHtml(r);
if(r.html){
var n = r.html.cloneNode(true);
dojo.query(".gs-visibleUrl", n).forEach(function(p){
p.parentNode.removeChild(p);
});
dojo.query(".gs-watermark", n).forEach(function(p){
p.parentNode.removeChild(p);
});
dojo.query("a", n).forEach(function(p){
if(p.getAttribute("target")){
p.removeAttribute("target");
}
});
results.appendChild(n);
}
}
if(w.cursor){
var cn = dojo.doc.createElement("div");
cn.className = "gsc-cursor";
var label = dojo.doc.createElement("div");
label.innerHTML = "Pages:";
label.className = "label";
cn.appendChild(label);
for(var i=0, len=w.cursor.pages.length; i<len; i++){
var pn = dojo.doc.createElement("div");
pn.className = "gsc-cursor-page";
if(i == w.cursor.currentPageIndex){
pn.className += " gsc-cursor-current-page";
}
pn.innerHTML = w.cursor.pages[i].label;
pn.idx = i;
dojo.connect(pn, "onclick", function(evt){
ws.gotoPage(evt.target.idx);
});
cn.appendChild(pn);
}
cursor.appendChild(cn);
}
}, [ws]);
If you want to execute a search when the page loads, then you can fire execute() with the criteria.
ws.execute("");
Finally we need to wire up the search button and form. We don’t care about the event details, we just want to execute the search for the current value in the search criteria field.
function query(evt){
dojo.stopEvent(evt);
ws.execute(dojo.trim(dojo.byId("searchCriteria").value));
}
dojo.connect(dojo.byId("searchButton"), "onclick", query);
dojo.connect(dojo.byId("searchForm"), "onsubmit", query);
});
</script>
In the body of your page, add the following markup to define the form:
<div>
<form id="searchForm">
<input type="text" autocomplete="off" id="searchCriteria" value=""/>
<a href="#" id="searchButton"><span>Search</span></a>
</form>
</div>
<div id="results"></div>
<div id="cursor"></div>
For clarity, I removed all styling. One thing you’ll notice is the “Search” button is an <a> tag instead of an <input> tag so that it could be more easily be styled.
Aside from our text field and search button, there are some CSS styles you can tweak for the search results and pagination:
<style type="text/css">
.gs-result{padding:6px 0;}
.gsc-cursor{display:inline;padding:10px 0;}
.gsc-cursor .label{color:#000;display:inline;font-weight:bold;margin-right:8px;}
.gsc-cursor-page{cursor:pointer;color:#00F;display:inline;margin-right:8px;
text-decoration:underline;}
.gsc-cursor-current-page{color:#000;font-weight:bold;text-decoration:none;}
</style>
That’s all there is to it. Load the page up and do a search!
