Visit the forum instructions to learn how to post to the forum, enable email notifications, subscribe to a category to receive emails when there are new discussions (like a mailing list), bookmark discussions and to see other tips to get the most out of our forum!
Google Custom Search: how to make it work?
  • We have a Google custom search field at the right bottom corner of the forum pages, so that people can search for content from our sites (wiki, forum, blog) and related sites.

    When you type your query and click "Search", you're taken to another page. Example:

    - Type "biomimicry" (without quotes) and click the search button at the far bottom right corner;

    On the page that loaded, you should see your query on the new search form (at the top) and the search results below it.
    However, the search form is empty, and no results are shown.

    How can I fix this?

     
  • 4 Comments sorted by
  • Is there a public repo for the OSE Forum code somewhere? I honestly haven't looked very hard for it, so I'm sorry if this has been made obvious somewhere.
     
  • To make it more convenient to read, I've copied the source code below:

    <div id="cse-search-form" 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 customSearchOptions = {};
      
        var imageSearchOptions = {};
        imageSearchOptions['layout'] = google.search.ImageSearch.LAYOUT_POPUP;
        customSearchOptions['enableImageSearch'] = true;
        customSearchOptions['imageSearchOptions'] = imageSearchOptions;
      
        var customSearchControl = new google.search.CustomSearchControl(
          '010823241464583136657:h3lzpyuunqm', customSearchOptions);

        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        customSearchControl.draw('cse-search-form', options);
      }, true);
    </script>
    <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

    The code above creates the custom search box you see at the bottom right of this page.
     


  • The code in that page is created by this MediaWiki extension:

    Here's the configuration for that extension:

            $output='<div id="cse-search-form" 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 customSearchOptions = {};
    var imageSearchOptions = {};
    imageSearchOptions["layout"] = google.search.ImageSearch.LAYOUT_POPUP;
    customSearchOptions["enableImageSearch"] = true;
    customSearchOptions["imageSearchOptions"] = imageSearchOptions;  var customSearchControl = new google.search.CustomSearchControl(
    "010823241464583136657:h3lzpyuunqm", customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    options.enableSearchboxOnly("http://");
    customSearchControl.draw("cse-search-form", options);
    }, true);
    </script><link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
    <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 customSearchOptions = {};
    var imageSearchOptions = {};
    imageSearchOptions["layout"] = google.search.ImageSearch.LAYOUT_POPUP;
    customSearchOptions["enableImageSearch"] = true;
    customSearchOptions["imageSearchOptions"] = imageSearchOptions;  var customSearchControl = new google.search.CustomSearchControl(
    "010823241464583136657:h3lzpyuunqm", customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    //options.setSearchFormRoot("cse-search-form");
    options.setAutoComplete(true);
    customSearchControl.draw("cse", options);
    function parseParamsFromUrl() {
    var params = {};
    var parts = window.location.search.substr(1).split("\x26");
    for (var i = 0; i < parts.length; i++) {
    var keyValuePair = parts[i].split("=");
    var key = decodeURIComponent(keyValuePair[0]);
    params[key] = keyValuePair[1] ?
    decodeURIComponent(keyValuePair[1].replace(/\+/g, " ")) :
    keyValuePair[1];
    }
    return params;
    }
    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
    customSearchControl.execute(urlParams[queryParamName]);
    }
    }, true);
    </script><link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
    ';//google code end here

     
  • Fixed. You can see the diff - I have adapted the Javascript code provided by Google and added it directly to the page (so we're not using the MediaWiki extension anymore).

     

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter

In this Discussion

Tagged

Loading