如何将谷歌自定义搜索与我所有已定义的搜索框结合起来？

Question

我想要实现的是将我已经存在的搜索与谷歌自定义搜索结合起来。 我有这个表单操作：

<div class="col-md-6 col-md-offset-3">
            <form action="#">
                <p><input type="text" id="search" placeholder="Type an artist name..." autocomplete="off" class="form-control" /></p>
                <p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
            </form>
            <div id="results"></div>
        </div>

我想以某种方式使用 JQuery 来点击搜索栏，它会改为查看 google 自定义搜索：

 <div>
        <script>
          (function() {
            var cx = 'myID';
            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>
        <gcse:search></gcse:search>
    </div >

到目前为止，我想开始它，我会这样做：

 $("form").on("submit", function() {...

所以现在我想知道我是否可以操纵 google 自定义搜索，这样我就不会有多个搜索框，只有一个功能搜索框，我可以在其中输入搜索然后我也许可以拥有 YouTube 搜索 API显示该视频，同时谷歌自定义搜索将输出该输入的结果。
到目前为止，我有两个搜索框做两种不同的事情，但我的最终目标是将它们组合起来，然后我可以只点击一个搜索栏，而不是两个。

Answer 1

我认为这可能的唯一方法是使用 ajax 提交您的表单，并在每个元素的顶部或之间“注入”您自己的结果。