Create a floating Google search widget using PrimeFaces Notification bar component

Posted Saturday August 13, 2011 ()

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 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;
          // Create a search control
          var searchControl = new;

          // Add in a WebSearch
          var webSearch = new;

          // Restrict our search to pages from your site
          var soptions = new;

          // 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

          // execute an inital search



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 ...>

                <script src="

		<script type="text/javascript" 
                    src="./js/gsearch.js" />

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.


 <f:subview id="search-widget">
          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:
                          padding:10px;"><img width="24" 

                     <div id="search-result" 
                          class="gs-results gs-webResult">

                 <f:facet name="footer">

                    <!-- Close the search window -->

                    <p:commandButton ajax="false" 
                     image="ui-icon ui-icon-close" 
                     onclick="gsearch.hide();" />




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>.

           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=";"  ...

Try it here

Good luck.


Show comments
Comments (Create a floating Google search widget using PrimeFaces Notification bar component )