Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts

    Google Api toggle Search Results

    Good Day!

    Please refer on this testing example:
    Code:
      <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.
    Last edited by rangana; 10-18-2008 at 06:54 AM. Reason: Removed API key
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by rangana View Post
    Good Day!

    Please refer on this testing example:
    Code:
      <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,

    Edit: remove please the google api key from your code

    best regards
    Last edited by oesxyl; 10-17-2008 at 11:50 PM.

  • Users who have thanked oesxyl for this post:

    rangana (10-18-2008)

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    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

  • Users who have thanked oesxyl for this post:

    rangana (10-18-2008)

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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:
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by rangana View Post
    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:
    Code:
    <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
    Last edited by oesxyl; 10-18-2008 at 06:08 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •