Create a floating Google search widget using PrimeFaces Notification bar component

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.

If you like the article, please share.
(Site URL pattern has changed as a result social actions counter was reset.)



Comment icon Comments (Newest first)