function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
London BenLondon Ben 

Implementing 'search' functionality.

Hi all

 

I'm working on a project to migrate a website to 'sites'

 

One thing that has me stumped at the moment is implementing 'search' functionality.

 

By this, I don't mean searching of salesforce objects, but searching content of pages 'like google'

 

This seems like something that someone must have tackled before - I've attempted to include the googlesearch api, but this doesnt seem to want to play ball on the sites platform..

 

Included my attempt here just for reference... (please note that the included api key will only work with my registered site - so for any playing about you would need to register with google and substitute with your own api code)

 

Any ideas would be most welcome - cheers!

Ben

 

 

<apex:page >
<script src="http://www.google.com/jsapi?key=ABQIAAAAFhpfQ8ljjRgKr3ylBZopURSu2Q3V9tNIMC-TQb4qeACXjenZIBTnpLOVK_O-z--z6YIDdEekHLB4Jg" type="text/javascript"></script>
<script>
    var previousOnload = window.onload;        
    window.onload = function()  { 
        if (previousOnload) { 
            previousOnload();
            alert('loading...');
           // Create a search control      
            var searchControl = new google.search.SearchControl();      
            // Add in a full set of searchers      
            var localSearch = new google.search.LocalSearch();      
            searchControl.addSearcher(localSearch);      
            searchControl.addSearcher(new google.search.WebSearch());      
            // Set the Local Search center point      
            localSearch.setCenterPoint("New York, NY");      
            // Tell the searcher to draw itself and tell it where to attach      
            searchControl.draw(document.getElementById("searchcontrol"));      
            // Execute an inital search      
            searchControl.execute("Google");    }    
            google.setOnLoadCallback(function);    
        }
    }
</script>
<div id="searchcontrol">Loading...</div>
</apex:page>
 
 
 
Message Edited by London Ben on  08-27-2009 10:14 AM


Best Answer chosen by Admin (Salesforce Developers) 
London BenLondon Ben
yep... that was it - not sure why it didnt work first time...
 
only thing to do now is get CMSforce to be a little more 'search engine friendly'.... 
 
but for everyone - I've put together a nice sample page using goog search functionality.
 
simply create a new page (eg apex/search )
 
paste in the following...
 
It shouldn't take a lot of figuring out how you can change / adapt this for all sorts of purposes
 
Enjoy
 
Cheers Bulent!
 
<apex:page title="Bens magic searchcy searchy">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Bens magic searchcy searchy</title>
    <style type="text/css">
      body *, table *,
      body {
        font-family: verdana, sans-serif;
        font-size: 13px;
      }

      td { vertical-align : top; padding : 0px; }

      table {
        border-spacing : 0px 0px;
        border : none;
      }

      td.content {
        width : 70%;
        padding-left : 20px;
        border-right : 2px solid rgb(204, 204, 204);
        }

      #content {
        padding : 10px;
        height : 1000px;
        background-color : #f9f9f9;
      }

      #sidebar {
        padding : 10px;
        height : 1000px;
        background-color : #e8e8e8;
      }

      #sidebar h2 {
        margin-top : 8px;
        margin-bottom : 8px;
        font-size : 11px;
        border-bottom : 1px solid rgb(204, 204, 204);
        color : rgb(51, 51, 51);
      }

      #sidebar a {
        line-height : 20px;
        border-bottom : 1px solid rgb(221, 204, 204);
        color : rgb(204, 0, 0);
        text-decoration : none;
      }

      #sidebar a:hover {
        border-bottom : 2px solid rgb(204, 0, 0);
      }

      #searchForm input.gsc-input {
        padding : 2px;
        color : rgb(51, 51, 51);
        border : 1px solid rgb(204, 204, 204);
      }

      h1 {
        font-family: arial, sans-serif;
        font-size : 16px;
        font-weight : bold;
        border-top : 1px solid #e0e0e0;
        text-align : center;
        margin-bottom : 10px;
        padding-bottom : 4px;
        color : rgb(204, 0, 0);
      }

      h1 .tagline,
      h1 a,
      h1 a .tagline {
        font-size : 13px;
        font-weight : normal;
        color : rgb(204, 0, 0);
        cursor : pointer;
        text-decoration : none;
      }

      h1 a span.tagline {
        padding : 2px;
        border-bottom : 1px solid rgb(221, 204, 204);
      }

      a span.tagline:hover {
        color : rgb(204, 0, 0);
        border-bottom : 2px solid rgb(204, 0, 0);
      }

      .gsc-control { width : 100% }
      #searchResults form.gsc-search-box { display : none; }
      #branding {
        background-color : #f9f9f9;
        padding-top : 10px;
        width : 100%;
      }

      #searchResults .gsc-control {
        width : 100%;
      }
      /* to right align branding, do this
      #branding table.gsc-branding { width : auto; }
      #branding td.gsc-branding-text div.gsc-branding-text { text-align : left; }
      */

    </style>

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load('search', '1');
      var searchControl;
      function OnLoad() {

        var bs = new google.search.BlogSearch();
        bs.setUserDefinedLabel("Blogosphere.com");

        var ws = new google.search.WebSearch();
        ws.setUserDefinedLabel("T'internet");

        var ct = new google.search.WebSearch();
        ct.setUserDefinedLabel("Carbon Trust");

        searchControl = new google.search.SearchControl();
        searchControl.addSearcher(bs);
        searchControl.addSearcher(ws);
        searchControl.addSearcher(ct);

        var container = document.getElementById("searchFormContainer");
        this.searchForm = new google.search.SearchForm(false, container);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
        searchControl.draw(document.getElementById("searchResults"), options);

        // Execute an inital search
        searchControl.execute("Carbon Trust Standard");
      }

      google.setOnLoadCallback(OnLoad, true);

    //]]>
    </script>
  </head>

  <body>
    <h1>Searchy searchy</h1>
    <table width="100%">
      <tr>
        <td class="content" valign="top" width="60%">

          <div id="content">
            <div id="searchResults">Loading...</div>
          </div>
        </td>
        <td class="sidebar" width="40%">
          <div id="sidebar">
            <h2>What would you like to know...</h2>

            <div id="hotlinks">
              <a href="javascript:searchControl.execute('CRC');">CRC</a><br/>
              <a href="javascript:searchControl.execute('Carbon Trust');">Carbon Trust</a><br/>
              <a href="javascript:searchControl.execute('SalesForce');">SalesForce</a><br/>
              <div id="searchFormContainer"></div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</apex:page>
 


All Answers
BulentBulent
This worked for me (this is the code google generated, all I did to add the apex page tags)
you can test it here: http://sitesdemo.force.com/test/searchpage
 
<apex:page cache="false" showHeader="false">
  <head>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA0dJzTxb43xEApzLAkjH3ExSF874FYD3Tzw2O9LzyBgr-09hckxR96WYGhlqnQG77o1JB0drYhP5F5w" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    google.load("search", "1");
 
    function OnLoad() {
      var searchControl = new google.search.SearchControl();
 
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      localSearch.setCenterPoint("New York, NY");
      searchControl.draw(document.getElementById("searchcontrol"));
      searchControl.execute("Google");
    }
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
 
  <body>
    <div id="searchcontrol">Loading...</div>
  </body>
</apex:page>
 
 
 
 
Message Edited by Bulent on  08-28-2009 06:05 PM


London BenLondon Ben
yep... that was it - not sure why it didnt work first time...
 
only thing to do now is get CMSforce to be a little more 'search engine friendly'.... 
 
but for everyone - I've put together a nice sample page using goog search functionality.
 
simply create a new page (eg apex/search )
 
paste in the following...
 
It shouldn't take a lot of figuring out how you can change / adapt this for all sorts of purposes
 
Enjoy
 
Cheers Bulent!
 
<apex:page title="Bens magic searchcy searchy">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Bens magic searchcy searchy</title>
    <style type="text/css">
      body *, table *,
      body {
        font-family: verdana, sans-serif;
        font-size: 13px;
      }

      td { vertical-align : top; padding : 0px; }

      table {
        border-spacing : 0px 0px;
        border : none;
      }

      td.content {
        width : 70%;
        padding-left : 20px;
        border-right : 2px solid rgb(204, 204, 204);
        }

      #content {
        padding : 10px;
        height : 1000px;
        background-color : #f9f9f9;
      }

      #sidebar {
        padding : 10px;
        height : 1000px;
        background-color : #e8e8e8;
      }

      #sidebar h2 {
        margin-top : 8px;
        margin-bottom : 8px;
        font-size : 11px;
        border-bottom : 1px solid rgb(204, 204, 204);
        color : rgb(51, 51, 51);
      }

      #sidebar a {
        line-height : 20px;
        border-bottom : 1px solid rgb(221, 204, 204);
        color : rgb(204, 0, 0);
        text-decoration : none;
      }

      #sidebar a:hover {
        border-bottom : 2px solid rgb(204, 0, 0);
      }

      #searchForm input.gsc-input {
        padding : 2px;
        color : rgb(51, 51, 51);
        border : 1px solid rgb(204, 204, 204);
      }

      h1 {
        font-family: arial, sans-serif;
        font-size : 16px;
        font-weight : bold;
        border-top : 1px solid #e0e0e0;
        text-align : center;
        margin-bottom : 10px;
        padding-bottom : 4px;
        color : rgb(204, 0, 0);
      }

      h1 .tagline,
      h1 a,
      h1 a .tagline {
        font-size : 13px;
        font-weight : normal;
        color : rgb(204, 0, 0);
        cursor : pointer;
        text-decoration : none;
      }

      h1 a span.tagline {
        padding : 2px;
        border-bottom : 1px solid rgb(221, 204, 204);
      }

      a span.tagline:hover {
        color : rgb(204, 0, 0);
        border-bottom : 2px solid rgb(204, 0, 0);
      }

      .gsc-control { width : 100% }
      #searchResults form.gsc-search-box { display : none; }
      #branding {
        background-color : #f9f9f9;
        padding-top : 10px;
        width : 100%;
      }

      #searchResults .gsc-control {
        width : 100%;
      }
      /* to right align branding, do this
      #branding table.gsc-branding { width : auto; }
      #branding td.gsc-branding-text div.gsc-branding-text { text-align : left; }
      */

    </style>

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load('search', '1');
      var searchControl;
      function OnLoad() {

        var bs = new google.search.BlogSearch();
        bs.setUserDefinedLabel("Blogosphere.com");

        var ws = new google.search.WebSearch();
        ws.setUserDefinedLabel("T'internet");

        var ct = new google.search.WebSearch();
        ct.setUserDefinedLabel("Carbon Trust");

        searchControl = new google.search.SearchControl();
        searchControl.addSearcher(bs);
        searchControl.addSearcher(ws);
        searchControl.addSearcher(ct);

        var container = document.getElementById("searchFormContainer");
        this.searchForm = new google.search.SearchForm(false, container);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
        searchControl.draw(document.getElementById("searchResults"), options);

        // Execute an inital search
        searchControl.execute("Carbon Trust Standard");
      }

      google.setOnLoadCallback(OnLoad, true);

    //]]>
    </script>
  </head>

  <body>
    <h1>Searchy searchy</h1>
    <table width="100%">
      <tr>
        <td class="content" valign="top" width="60%">

          <div id="content">
            <div id="searchResults">Loading...</div>
          </div>
        </td>
        <td class="sidebar" width="40%">
          <div id="sidebar">
            <h2>What would you like to know...</h2>

            <div id="hotlinks">
              <a href="javascript:searchControl.execute('CRC');">CRC</a><br/>
              <a href="javascript:searchControl.execute('Carbon Trust');">Carbon Trust</a><br/>
              <a href="javascript:searchControl.execute('SalesForce');">SalesForce</a><br/>
              <div id="searchFormContainer"></div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</apex:page>
 
This was selected as the best answer