Question

这是一个非常基本的问题。我正在使用谷歌自定义搜索API构建一个网站，以在我的页面上显示搜索结果。默认情况下，Google会始终在页面上显示搜索结果框（没有任何实际结果），并在用户单击搜索按钮时填充列表。我的目标是隐藏搜索结果框，并在用户点击搜索按钮时使用jquery显示它。

您可以看到演示here，但我进行了设置，因此当您点击徽标（左上角）时，结果div会显示。我似乎无法弄清楚用于在点击时触发节目的正确选择器。我还需要div来显示何时在搜索字段上按下“enter”。这是我简单的jquery：

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


         });

    });

我需要将徽标a替换为适当的选择器，以便在点击时显示cse div。您可以在页面右上角看到搜索输入按钮。帮助！

Answer 1

使用此选择器：

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

注意：给它一个ID是一种更好的方法，但是如果不改变任何html，上面的选择器就可以工作。

更新

看起来谷歌正在造成麻烦，清除你正在创建的事件，把连接放在他们的处理程序中以便它可以工作：

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);

Answer 2

过去我使用Selector Detector和SelectorGadget来找出复杂的选择器。不确定这是否能解决您的问题，但值得一试。

我刚刚写了一篇比较两者的文章，其中包括演示和下载链接。如果您想了解更多信息，请在此处查看：http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/

无法找到jquery表单点击的正确选择器

2 个答案:

更新