Question

This is a very basic question. I am building a website using the google custom search api to display search results on my page. By default, google displays the search-results box on the page (without any actual results) at all times, and the list is populated when the user clicks the search button. My goal is to hide the search results box, and display it using jquery when a user clicks on the search button.

You can see a demo here but I set it up so when you click on the logo (top left), the results div shows. I cannot seem to figure out the correct selector for triggering the show on a click.I also need the div to show when “enter” is pressed on the search field. Here is my simple jquery:

$(document).ready(function(){
            alert($('input.gsc-search-button').length);
            $('input.gsc-search-button').click(function(){
            $('#cse').show(500);


         });

    });

I need to replace logo a with the appropriate selector that will show the cse div on click. You can see the seach input button in the top right of the page. Help!!!

Answer 1

Use this selector:

$(function() {
  $('input.gsc-search-button').click(function(){ 
     $('#cse').show(500);
  });
});

Note: giving it an ID would be a better approach, but without changing any html, the above selector would work.

Update

Looks like google’s is causing the trouble, clearing the event you’re creating, put the hookup inside their handler so it works:

google.setOnLoadCallback(function(){
  var customSearchControl = new google.search.CustomSearchControl('012390824037940683019:gxvww9wrolu');
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setSearchFormRoot('cse-search-form');
  customSearchControl.draw('cse', options);
  $('input.gsc-search-button').click(function(){ 
    $('#cse').show(500);
  });
}, true);