在自定义搜索引擎的搜索框上添加搜索按钮

Question

如何将搜索按钮添加到HTML？我尝试添加它，但是当我搜索显示结果但不显示我的搜索文本的示例 YouTube 时 YouTube 我该如何解决这个问题，我需要在此代码中更改什么？谢谢

.main{
 position: absolute;
 top: 10px;
    left: 25%;
 width: 50%;
 height: auto; 
 text-align: center;
}
.q{
 padding: 5px;
 width: 90%;
 margin-top: -30px;
 border: solid 1px #c68e00;
 font-size: 17px;
 font-family: Arial;
 height: 40px;
}

<script>
    (function() {
        var cx = '004533415228465222070:r2ak9s12hwi';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
</div>

<div class="main">
 <br/><br/>
 <form action="" method="GET">
 <input class="q" name="q" placeholder="Search by Name or type URL" title="Search ..." value="" /> 
</form>

Answer 1

我不确定结果，但希望能成功。

在搜索输入中添加了 id="searchbox"。和这两行。

var urlParams = new URLSearchParams(window.location.search);
document.getElementById('searchbox').value = urlParams.get('q');

你的完整代码现在看起来像这样。

<div class="main">
    <br/><br/>
    <form action="" method="GET">
 <input class="q" name="q" id="searchbox" placeholder="Search by Name or type URL" title="Search ..." value="" /> 
</form>
</div>
<script>
    (function() {
        var cx = '004533415228465222070:r2ak9s12hwi';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
var urlParams = new URLSearchParams(window.location.search);
document.getElementById('searchbox').value = urlParams.get('q');
</script>
<gcse:searchresults-only></gcse:searchresults-only>

在自定义搜索引擎的搜索框上添加搜索按钮

add search button on search box on Custom Search Engine

html

javascript

search

jquery

google-search-api