Below is our Google search code. Visit this <a href="http://code.google.com/apis/ajax/playground/" target="_blank" 

class="news_link">http://code.google.com/apis/ajax/playground/</a> to customize your search code. You will also need to signup for the required free API key also from that site. We save this as 

./js/gsearch.js



<pre class="brush: js">

 google.load('search', '1');

 function OnLoad() {

 var options = new google.search.DrawOptions();
 options.setSearchFormRoot
 (document.getElementById("search-form")); 
 
 
 // Create a search control
 var searchControl = new google.search.SearchControl();

 // Add in a WebSearch
 var webSearch = new google.search.WebSearch();

 // Restrict our search to pages from your site
 webSearch.setSiteRestriction('http://your-site.com');
 searchControl.setResultSetSize
 (google.search.Search.SMALL_RESULTSET);
 
 var soptions = new google.search.SearcherOptions();
 soptions.setExpandMode
 (google.search.SearchControl.EXPAND_MODE_OPEN);

 // Add the searcher to the SearchControl
 searchControl.addSearcher(webSearch, soptions);
 searchControl.setLinkTarget ("_blank");

 // tell the searcher to draw itself 
 // and tell it where to attach
 searchControl.draw
 (document.getElementById("search-result"),options);

 // execute an inital search
 searchControl.execute(');
 }

 google.setOnLoadCallback(OnLoad); 

 
</pre>



The above code is restricted to search specific website only. Include this in the head section of your page. Notice the element IDs search-form and 

search-result.



<pre class="brush: xml">

	&lt;html ...&gt;
	&lt;head&gt;
		.
		.
		.

 &lt;script src="http://www.google.com/jsapi?
 key=your_api_key
 type="text/javascript"&gt;&lt;/script&gt;

		&lt;script type="text/javascript" 
 src="./js/gsearch.js" /&gt;
	&lt;/head&gt;
	&lt;body&gt;
		.
		.
		.

</pre>



When activated, our widget is displayed in the upper right hand corner of the page. Save the code below as 

search.xhtml. Note that this can also be implemented as &lt;h:panelGroup&gt; with position:fixed style. 

 We set that aside for this blog.



<pre class="brush: xml">

 &lt;html&gt;
 &lt;head&gt;
 .
 .
 .
 &lt;/head&gt;

 &lt;f:subview id="search-widget"&gt;
 &lt;p:notificationBar 
 style="width:350px;right:-0px;background-color: 
 transparent;border:0px;" 
 position="top" effect="slide" 
 widgetVar="gsearch" &gt; 
 
 &lt;p:panel styleClass="k_shadow" &gt;
 
 &lt;h:panelGrid style="font-size:10px;"&gt;

 &lt;!-- the graphic is just a loading
 animation --&gt; 

 &lt;div id="search-form"&gt;
 &lt;span style="color:#676767;font-weight:
 bold;font-size:14px;margin:10px;
 padding:10px;"&gt;&lt;img width="24" 
 src="/kauswagan/images/progress.gif"&gt;
 &lt;/img&gt;
 &lt;/span&gt; 
 &lt;/div&gt;

 &lt;div id="search-result" 
 class="gs-results gs-webResult"&gt;
 &lt;/div&gt;
 &lt;/h:panelGrid&gt;

 &lt;f:facet name="footer"&gt;

 &lt;!-- Close the search window --&gt;

 &lt;p:commandButton ajax="false" 
 image="ui-icon ui-icon-close" 
 style="width:20px;height:20px;" 
 onclick="gsearch.hide();" /&gt;

 &lt;/f:facet&gt;

 &lt;/p:panel&gt;

 &lt;/p:notificationBar&gt; 
 
 &lt;/f:subview&gt;


</pre>



The code above is wrapped in f:subview. This is because this code is meant to saved separate from your main 

page. The intention is to use the search widget in more than one page. In your page where you want this widget, insert 

a line like below somewhere near the end before &lt;/h:form&gt;. 



<pre class="brush: xml">

	&lt;ui:include 
 src="search.xhtml" /&gt;

</pre>



Use any command component of your choice and use onclick event. Also make sure ajax is disabled if ajax is available in 

the component of your choice.




<pre class="brush: js">

	... onclick="gsearch.show();" ...

</pre>




<a href="#" onclick="gsearch.show();" class="news_link">Try it here</a> 




Good luck.

Create a floating Google search widget using PrimeFaces Notification bar component