谷歌自定义搜索搜索按钮和自动完成表事件

时间:2018-03-24 02:50:23

标签: google-custom-search

我在项目中使用了Google自定义搜索API,并尝试检测以下事件:

  • 在搜索输入框中按Enter键;
  • 点击搜索按钮;
  • 从推荐列表中选择一个选项。

我做了很多搜索,但是,我的代码只能捕获第一个事件。如果有人能指出我正确的方向,我将非常感激。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>My Search</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <div>
        <h3 align="center">My Search</h3>
    </div>
    <div>
        <script>
            (function () {
                var cx = 'xxxx:xxxx';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
            })();
        </script>
        <script>
            function addExtraParams(){
                alert($("input.gsc-input").val()); //For debugging only
            };
            $(document).ready(function(){
              setTimeout(
                function(){
                  $( 'input.gsc-input' ).keyup( function(e){
                    if ( e.keyCode == 13 ) {
                      addExtraParams();
                    }
                  });

                  $( 'input.gsc-search-button' ).click(function(){
                    addExtraParams();
                  });

                  $( 'input.gsc-completion-container' ).click(function(){
                    addExtraParams();   
                  });
                }, 1000
              );
            }); 
        </script>
        <gcse:search></gcse:search>
    </div>
    </body>
</html>

0 个答案:

没有答案