Javascript 我如何将google自定义搜索与我的所有现成定义的搜索框相结合？

我试图实现的是将我现有的搜索与谷歌定制搜索相结合。 我有以下行动：

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

所以现在我想知道我是否可以操纵谷歌自定义搜索，这样我就不会有多个搜索框，只有一个功能性搜索框，在这里我可以输入搜索，然后我可以让YouTube搜索API显示该视频，同时谷歌自定义搜索将输出该输入的结果。

---

到目前为止，我有两个搜索框在做两件不同的事情，但我的最终目标是将它们组合起来，然后我可以只点击一个搜索栏，而不是两个。

我看到这一点的唯一方法是使用ajax提交表单，并在每个元素的顶部或中间“注入”谷歌结果

 <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() {...