Passing Seach Queries to Google Custom Search

Question

BlueCharge 0 Light Poster

15 Years Ago

Hello Everyone,

I have chosen to use Google Custom Search with my website and was given the following code, my question is, how can i pass a search query from my homepage which has a standard form on there to the search page which holds this code?

I am given a search box within this code but would prefer to use my own on the homepage...

Thanks

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('001427157132748787903:rmvstkwg_s4');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="" type="text/css" /> <style type="text/css">
  .gsc-control-cse {
    font-family: Verdana, sans-serif;
    border-color: #070707;
    background-color: #070707;
  }
  input.gsc-input {
    border-color: #2A2A2A;
  }
  input.gsc-search-button {
    border-color: #63D03B;
    background-color: #37831C;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-top-color: #FF9900;
    border-left-color: #E9E9E9;
    border-right-color: #E9E9E9;
    background-color: #37831C;
  }
  .gsc-tabsArea {
    border-color: #E9E9E9;
  }
  .gsc-webResult.gsc-result {
    border-color: #070707;
    background-color: #070707;
  }
  .gsc-webResult.gsc-result:hover {
    border-color: #070707;
    background-color: #070707;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b {
    color: #237F03;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b {
    color: #237F03;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b {
    color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b {
    color: #237F03;
  }
  .gsc-cursor-page {
    color: #237F03;
  }
  a.gsc-trailing-more-results:link {
    color: #237F03;
  }
  .gs-webResult .gs-snippet {
    color: #FFFFFF;
  }
  .gs-webResult div.gs-visibleUrl {
    color: #237F03;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #237F03;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #070707;
  }
  .gsc-results .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #070707;
  }
  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #37831C;
  }
  .gs-promotion {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #237F03;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #237F03;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #FFFFFF;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #237F03;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #FFFFFF;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #237F03;
  }
</style>

javascript seo

3 Contributors
3 Replies
244 Views
20 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by BlueCharge

Dani AI

Generated 8 Months Ago

For : the simplest, robust flow is this — have the homepage form submit its query with GET to search.php (for example ?q=term). On search.php let the Google Custom Search widget initialize as normal; when the page sees a non-empty GET value it should tell the CSE widget to run that query immediately. This keeps the Google control separate from any site form (as recommended) and matches what meant about using the Google search API.

Sample homepage form (keeps the query in the URL):

<form action="/search.php" method="get" id="site-search">
  <input name="q" type="search" />
  <button type="submit">Search</button>
</form>

On search.php: after the CSE code has been loaded and the CSE instance is available, read the URL parameter and execute the search. The code below assumes the CSE instance has been made accessible as a global (for example assigned to window.cseControl where the widget is created):

(function(){
  var params = new URLSearchParams(location.search);
  var q = params.get('q');
  if (!q) return;

  function tryRun(){
    if (window.cseControl) {
      window.cseControl.execute(q);
    } else {
      setTimeout(tryRun, 50);
    }
  }
  tryRun();
})();

Notes and troubleshooting:

If the CSE instance is local inside an init callback, expose it (e.g. assign to window.cseControl) or call execute(...) from that callback after initialization.
Make sure the homepage input name (here q) matches the parameter read on search.php.
Sanitize/escape any GET value before echoing it into HTML to avoid XSS. Log the initial query and the CSE object in the console while debugging.
If the automatic execute does nothing, confirm the widget has finished initializing before calling execute, and check the browser console for JS errors.

All 3 Replies

almostbob 866 Retired: passive income ROCKS

15 Years Ago

the google search is "google search api"

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-05-24T05:33:31+00:00

I can't see that you would want the Google control to be part of your own form, which will submit to a different (non-Google) server.

In fact, as far as I can tell, you positively shouldn't try to merge the two.

However, you can adapt the code you were given to incorporate it into your layout:

Change <div id="cse" ...>Loading</div> to an HTML element of your choice eg. table cell <td id="cse">Loading</td> or paragraph <p id="cse">Loading</p> . It may also work with an inline span <span id="cse">Loading</span> . Make sure there is only ever one element with id="cse" .
Adapt the CSS to give the control the appearance you desire.

But always with the Google control outside your own form.

Airshow

BlueCharge 0 Light Poster · Answer 2 · 2011-05-24T18:58:50+00:00

I can't see that you would want the Google control to be part of your own form, which will submit to a different (non-Google) server.
In fact, as far as I can tell, you positively shouldn't try to merge the two.
However, you can adapt the code you were given to incorporate it into your layout:
Change <div id="cse" ...>Loading</div> to an HTML element of your choice eg. table cell <td id="cse">Loading</td> or paragraph <p id="cse">Loading</p> . It may also work with an inline span <span id="cse">Loading</span> . Make sure there is only ever one element with id="cse" .

Adapt the CSS to give the control the appearance you desire.

But always with the Google control outside your own form.
Airshow

Thank you all for your replies but I dont think you get what i mean. I have one search form on my homepage which fits with my site template. I want what ever is types into here passed to the search.php page by maybe using the GET method and then for the google search code (Posted above) to search for what ever is in the GET method however, if there is not anything in the GET method then it will just display the seach box on the search page which it does already.

Thank you,

Also sorry if my English is not great.

Passing Seach Queries to Google Custom Search

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers