Creating this widget requires Google search API. The widget itself has 3 parts. The already mentioned Google code, the
widget itself, and the component that fires the event to display our widget.
Below is our Google search code. Visit this http://code.google.com/apis/ajax/playground/ 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
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);
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.
<html ...>
<head>
.
.
.
<script src="http://www.google.com/jsapi?
key=your_api_key
type="text/javascript"></script>
<script type="text/javascript"
src="./js/gsearch.js" />
</head>
<body>
.
.
.
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 <h:panelGroup> with position:fixed style.
We set that aside for this blog.
<html>
<head>
.
.
.
</head>
<f:subview id="search-widget">
<p:notificationBar
style="width:350px;right:-0px;background-color:
transparent;border:0px;"
position="top" effect="slide"
widgetVar="gsearch" >
<p:panel styleClass="k_shadow" >
<h:panelGrid style="font-size:10px;">
<!-- the graphic is just a loading
animation -->
<div id="search-form">
<span style="color:#676767;font-weight:
bold;font-size:14px;margin:10px;
padding:10px;"><img width="24"
src="/kauswagan/images/progress.gif">
</img>
</span>
</div>
<div id="search-result"
class="gs-results gs-webResult">
</div>
</h:panelGrid>
<f:facet name="footer">
<!-- Close the search window -->
<p:commandButton ajax="false"
image="ui-icon ui-icon-close"
style="width:20px;height:20px;"
onclick="gsearch.hide();" />
</f:facet>
</p:panel>
</p:notificationBar>
</f:subview>
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 </h:form>.
<ui:include
src="search.xhtml" />
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.
... onclick="gsearch.show();" ...
Try it here
Good luck.
