Separating the Search Results
By default, the search text box, Search button, and so forth, together with the search results, are kept together in a linear column. In this section, you’ll find out how to move the results to a different place on the page.
Figure 9
shows you an example of what it might look like. This is an example of
what you can do with the setRoot method from
GsearcherOptions. The results are on the left, with the
search box (etc.) on the right. setRoot takes one
argument, an element where the results are to be displayed.
You probably guessed rightly that this was done with a table and
separate ids, one for the results set by setRoot, and
one for the search box set by draw. Example 7, following
Figure 9,
shows you the code to do this. The changes are extensive enough that the
example presents the whole sample.html file again.
We’ve drawn attention to important code with bold.
Figure 9. Splitting the search box and results with setRoot
Example 7. sample.html rewritten to split search and results
<html > <head> <title>Sample Search</title> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> function doSearch() { // Instantiate control, web search service var search = new GSearchControl(); ...Get Google Ajax Search API now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
