...

View Full Version : Resolved Google Api toggle Search Results



rangana
10-17-2008, 10:07 AM
Good Day!

Please refer on this testing example:


<script src="jsapi.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//
//<![CDATA[
google.load('search', '1.0'); // Tell google to load the "search" api v. "1.0"

function OnLoad() {

// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root
var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("header"));

// site restricted web search with custom label
var siteSearch=new google.search.WebSearch();
//siteSearch.setUserDefinedLabel("YourCashForGold.com"); // Label for my search
//siteSearch.setUserDefinedClassSuffix("siteSearch"); // Suffix
//siteSearch.setSiteRestriction("yourcashforgold.com"); // Restrict the search on this url
searchControl.addSearcher(siteSearch);


searchControl.draw(document.getElementById("center"), options);

}
google.setOnLoadCallback(OnLoad, true);
//]]>
</script>
<div id="header" style="width:300px;"></div>
<div id="center">
Contents. This should not be removed. </div>



Does anyone among you know of how to keep the contents of the target div (center div on my ex.)?

I was hoping that the (highlighted) text would be seen, and when someone searches, it will be replaced by the search results.

Please guide.

oesxyl
10-17-2008, 10:47 PM
Good Day!

Please refer on this testing example:


<script src="http://www.google.com/jsapi?key=......" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//
//<![CDATA[
google.load('search', '1.0'); // Tell google to load the "search" api v. "1.0"

function OnLoad() {

// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root
var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("header"));

// site restricted web search with custom label
var siteSearch=new google.search.WebSearch();
//siteSearch.setUserDefinedLabel("YourCashForGold.com"); // Label for my search
//siteSearch.setUserDefinedClassSuffix("siteSearch"); // Suffix
//siteSearch.setSiteRestriction("yourcashforgold.com"); // Restrict the search on this url
searchControl.addSearcher(siteSearch);


searchControl.draw(document.getElementById("center"), options);

}
google.setOnLoadCallback(OnLoad, true);
//]]>
</script>
<div id="header" style="width:300px;"></div>
<div id="center">
Contents. This should not be removed. </div>



Does anyone among you know of how to keep the contents of the target div (center div on my ex.)?

I was hoping that the (highlighted) text would be seen, and when someone searches, it will be replaced by the search results.

Please guide.
not sure that I understand the problem, but draw method of searchControl write in the div with id 'center'. If you want to keep "Contents. This should not be removed." this is not ok, :)

remove please the google api key from your code
best regards

rangana
10-18-2008, 02:29 AM
Hi oesxyl,

Thank you for your concern about my API key.

Yes, the draw method writes in the specific div that you set, and in my example, it's the center div.

But when API has fully loaded, it remove the contents of "center" div, which I am hoping to stay, unless someone makes a search.

Hope that makes sense.

Please continue shedding light.

oesxyl
10-18-2008, 03:40 AM
I'm guessing, two option:
- set the content of the 'center' div after the api is loaded with what you want to be there
- use dynamic loading, for me seems more complicated:

http://code.google.com/apis/ajax/documentation/#Dynamic

best regards

rangana
10-18-2008, 04:53 AM
But the link you've given only works for MAP API.

Reminding me of that third param (callback), I made it to work, with slight trick:


<script src="jsapi.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//
//<![CDATA[
function OnLoad()
{
var val=document.getElementById('mysearch').value; // Get the dummy textbox's value

// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root
var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("header"));

// site restricted web search with custom label
var siteSearch=new google.search.WebSearch();
searchControl.addSearcher(siteSearch); // Do the Web Search

searchControl.draw(document.getElementById("center"), options); // Draw the elements
searchControl.execute(val); // Execute the search input

}
//]]>
</script>
<div id="header" style="width:300px;">
<input type="text" id="mysearch" style="width:200px;">
<input type="button" value="Search" onclick="google.load('search','1.0',{'callback':OnLoad});">
</div>

<div id="center">
Contents. This should not be removed unless I searched.
</div>


I made a "dummy" search form and call the google.load() method on the onclick event of my search button.

On that function, I used the execute method of searchControl object, and it works well, assigning the value of the textbox as the "search" string.

Thank you so much Oesxyl for your continous support.

P.S. I can't add any rep, it says I should spread to others.

oesxyl
10-18-2008, 05:06 AM
But the link you've given only works for MAP API.
cross my mind to said to write your own callback but having no idea how you can trigger loading and other things I just forget, :)


Reminding me of that third param (callback), I made it to work, with slight trick:


<script src="jsapi.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//
//<![CDATA[
function OnLoad()
{
var val=document.getElementById('mysearch').value; // Get the dummy textbox's value

// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root
var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("header"));

// site restricted web search with custom label
var siteSearch=new google.search.WebSearch();
searchControl.addSearcher(siteSearch); // Do the Web Search

searchControl.draw(document.getElementById("center"), options); // Draw the elements
searchControl.execute(val); // Execute the search input

}
//]]>
</script>
<div id="header" style="width:300px;">
<input type="text" id="mysearch" style="width:200px;">
<input type="button" value="Search" onclick="google.load('search','1.0',{'callback':OnLoad});">
</div>

<div id="center">
Contents. This should not be removed unless I searched.
</div>


I made a "dummy" search form and call the google.load() method on the onclick event of my search button.

On that function, I used the execute method of searchControl object, and it works well, assigning the value of the textbox as the "search" string.
I'm glad that you solved, :)


Thank you so much Oesxyl for your continous support.
you are welcome any time, :)


P.S. I can't add any rep, it says I should spread to others.
don't warry about that, in fact that means you give me in the past, thank you for that, :)

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum