Thursday, June 23, 2011

Modifying the Random Quote Generator to Add Search

After using the random quote generator for several months, I decided to add a search feature.  Cycling through 300 quotes to find the one I wanted got kind of old.  Fortunately, the search feature wasn't difficult to implement.

First off, go to the gadgets work page (http://code.google.com/intl/en/apis/gadgets/docs/tools.html#GGE).  Use the editor to open the existing quote generator.  

 I have named my quote generator versions in sequential order.  Before this update, my most recent version was rq5.xml. 
After opening the quote generator, save it as a new file.  In my case, the new name was rq6.xml.  

Replace the code  between the content tags

<content type="html">

</content>

With

<content type="html">

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script>
//The Google spreadsheet.
var worksheetJSON;
//Starting quote.
var intQuote = "1"
//Search index.
var intSearch = 0;

function loadWorksheetJSON(json)
{
   worksheetJSON   = json;
   var intBase         = 2;
   var intRange        = worksheetJSON.feed.entry.length - intBase;
   var intRandomNumber = 1;
   var blnBreak        = 0;
   
   while (blnBreak == 0)
   {
      intRandomNumber = Math.floor(Math.random() * intRange);
      intRandomNumber = intRandomNumber + intBase;

      entry = worksheetJSON.feed.entry[intRandomNumber];
      if (entry.gs$cell.col == '3')
      {
         intQuote = intRandomNumber;
         blnBreak = 1;
      }
   }

   entry = worksheetJSON.feed.entry[intRandomNumber];
   
   $(document).ready
   (
      function()
      {
         document.getElementById("dHoldMsg").innerHTML = entry.content.$t;
         // Tells gadget to resize itself
         //gadgets.window.adjustHeight();
      }
   );
}

function randQuote(json)
{
   var worksheetJSON   = json;
   var intRange        = worksheetJSON.feed.entry.length;
   var intRandomNumber = 1;
   var blnBreak        = 0;
   
   while (blnBreak == 0)
   {
      intRandomNumber = Math.floor(Math.random() * intRange);
      intRandomNumber = intRandomNumber;

      entry = worksheetJSON.feed.entry[intRandomNumber];
      if (entry.gs$cell.col == '3')
      {
         intQuote = intRandomNumber;
         blnBreak = 1;
      }
   }
   
   entry = worksheetJSON.feed.entry[intRandomNumber];
   document.getElementById("dHoldMsg").innerHTML = entry.content.$t;
}

function nextQuote(json)
{
   var worksheetJSON   = json;
   var intRange        = worksheetJSON.feed.entry.length;
   
   intQuote = intQuote + 3;
   
   if (intQuote > intRange)
   {
      intQuote = 5;
   }
   
   entry = worksheetJSON.feed.entry[intQuote];
   document.getElementById("dHoldMsg").innerHTML = entry.content.$t;
}

function prevQuote(json)
{
   var worksheetJSON   = json;
   var intRange        = worksheetJSON.feed.entry.length;
   
   intQuote = intQuote - 3;
   
   if (intQuote < 3)
   {
      intQuote = intRange-1;
   }
   entry = worksheetJSON.feed.entry[intQuote];
   document.getElementById("dHoldMsg").innerHTML = entry.content.$t;
}

function f_Search(json)
{
  var worksheetJSON = json;
  var intRange = worksheetJSON.feed.entry.length;
  var entry;
  var k;
  
   for (k = intSearch; k < intRange; ++k)
  {  
     entry = new String(worksheetJSON.feed.entry[k].content.$t);
     
    if (entry.indexOf($("#tSearch").val()) !=-1)
    {        
      if (worksheetJSON.feed.entry[k].gs$cell.col == '3')
      {
         document.getElementById("dHoldMsg").innerHTML = entry;
         intSearch = k + 1;
         break;
      }
    }
  }
  
  if (intRange == k)
  {
    intSearch = 0;
  }
}
</script>

<script src="https://spreadsheets.google.com/feeds/cells/0Ak1itrncGIGldFpzUXdaZHRIbFU5S3VkV0g4dVJvTFE/1/public/values?alt=json-in-script&callback=loadWorksheetJSON&output=json"></script>

<table align="center"><tbody>
<tr><td>


<div align="center">
   <input id="bPrev" name="bPrev" onclick="prevQuote(worksheetJSON)" type="Button" value="<<" />
   <input id="bRefresh" name="bRefresh" onclick="randQuote(worksheetJSON)" type="Button" value="?" />
   <input id="bNext" name="bNext" onclick="nextQuote(worksheetJSON)" type="Button" value=">>" />
</div>

<div id="dHoldMsg"></div>

<div align="center">
   <input id="tSearch" name="tSearch" type="text" value="" />
   <input id="bSearch" name="bSearch" onclick="f_Search(worksheetJSON);" type="button" value="Search" />
</div>

</td></tr>
</tbody></table>
]]>
</content>

The key is a new function named "f_Search" and a search box.  The function uses a global variable named "intRange"  which is defined at the start of the script tag.


//The Google spreadsheet.
var worksheetJSON;
//Starting quote.
var intQuote = "1"
//Search index.
var intSearch = 0;


function f_Search(json)
{
  var worksheetJSON = json;
  var intRange = worksheetJSON.feed.entry.length;
  var entry;
  var k;
  
   for (k = intSearch; k < intRange; ++k)
  {  
     entry = new String(worksheetJSON.feed.entry[k].content.$t);
     
    if (entry.indexOf($("#tSearch").val()) !=-1)
    {        
      if (worksheetJSON.feed.entry[k].gs$cell.col == '3')
      {
         document.getElementById("dHoldMsg").innerHTML = entry;
         intSearch = k + 1;
         break;
      }
    }
  }
  
  if (intRange == k)
  {
    intSearch = 0;
  }
}
</script>


The search box code follows


<div align="center">
   <input id="tSearch" name="tSearch" type="text" value="" />
   <input id="bSearch" name="bSearch" onclick="f_Search(worksheetJSON);" type="button" value="Search" />
</div>



Here is a working example. Try "union" as a search term.