Javascript 如何将Google自定义搜索元素与现有表单元素一起使用？

我正在尝试使用我当前的搜索表单和谷歌的自定义搜索元素，但到目前为止，我无法让它工作。这是我目前的搜索表

<form class="search-form" action="/search/">
    <p class="inputs">
        <label for="search-q">Search</label>
        <input type="search" id="search-q" name="search" data-gname="search"placeholder="Find what you're looking for..." value="#formatted_query#">
        <input type="submit" value="Go" class="button postfix brand-orange-bk">
    </p>
</form>

所以我尝试了下面的代码，但没有成功…没有结果显示/返回

(function() {
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    //var s = document.getElementsByTagName('script')[0];
    var s = google.search.cse.element.getElement('search');

    // do the search:
    var searchTerm = $('##search-q').val();
    s.execute(searchTerm);

    s.parentNode.insertBefore(gcse, s);

  })();

  $('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

（函数（）{
变量cx='004626212387516433456:aex2tyveipy'；
var gcse=document.createElement（'script'）；
gcse.type='text/javascript'；
gcse.async=true；
//gcse.src=https://cse.google.com/cse.js?cx=“+cx；
gcse.src=（document.location.protocol=='https:'？'https:'：'http:'）+'/cse.google.com/cse.js？cx='+cx；
//var s=document.getElementsByTagName（'script'）[0]；
var s=google.search.cse.element.getElement（'search'）；
//执行以下搜索：
var searchTerm=$（'##search-q'）.val（）；
s、 执行（搜索期限）；
s、 parentNode.insertBefore（gcse，s）；
})();
$（“##谷歌搜索结果”）.html（“”）；

我发现了一个类似的线程（），但该线程没有解决方案。我还发现了另一个线程（），但该解决方案的问题是，每当我单击搜索时，它都会转到另一个页面，忽略以下代码：

$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

$（'##谷歌搜索结果'）.html（''；

---

非常感谢您的帮助。谢谢。

好的，谢谢我的同事，这就是我们解决问题的方法。我把它放在这里也许它可以帮助别人

searchhelper.perform_google = function(){

    if(typeof(google)!='undefined'){
        google.search.cse.element.render({
            div: "google-search-results",
            tag: 'searchresults-only',
            gname: 'google-results-gname'
        });
        var element = google.search.cse.element.getElement('google-results-gname');
        var query = $('##search-q').val();
        element.execute(query);
    }
};

(function(){
    // add the google custom stuff:
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

window.__gcse = {
  parsetags: 'explicit',
  callback: function(){
    searchhelper.search('all');
  }
};

---

在大量调查和搜索之前和之后，已经出现了这种情况，发现如下： 下面是一个完整的示例，您只需使用自己的CSE ID更新它，并在过滤返回结果时使用您可能需要使用的域和节

CSE V2：自定义搜索引擎编程
h4.警告{颜色：红色；}
h4.建议{颜色：绿色；}
.gs图像框、.gs web图像框{
显示：无；
}
包装区域上方的.gcsc品牌.gsc{
显示：无；
}
var searchQuery=“”；
var renderSearchTextboxElement=函数（）{
google.search.cse.element.render(
{
div:“dynamicTXT1”，
标记：“仅搜索框”，
gname:'main-search-button1'，
属性：{
enableAutoComplete：正确，
启用历史：正确，
结果URL:“/search”，
queryParameterName:'q'
}
});
google.search.cse.element.render(
{
div:“dynamicTXT2”，
标记：“仅搜索框”，
gname:'main-search-button2'，
属性：{
enableAutoComplete：正确，
启用历史：正确，
结果URL:“/search”，
queryParameterName:'q'
}
});
}
var renderSearchElement=函数（重构为）{
var as_sitesearchVal=“”；
var filterItems=重构到拆分（“”）；
如果（FilterItems.length==1）{
as_sitesearchVal=重构为；
}
var resultlist=google.search.cse.element.getElement（'main-searchresults'）；
如果（结果列表）{
resultlist.clearAllResults（）；
document.getElementById（“默认”）.innerHTML=“”；
}
google.search.cse.element.render(
{
div:“默认”，
标记：“仅搜索结果”，
gname:“主要搜索结果”，
属性：{
queryParameterName:'q'，
as_oq：重组为，
as_sitesearch:as_sitesearchVal，
},
});
};
变量i=0
函数执行程序（filterName）{
//基于查询字符串设置文本框值
如果（搜索查询）{
google.search.cse.element.getElement（'main-search-button1'）.prefillQuery（searchQuery）；
google.search.cse.element.getElement（'main-search-button2'）.prefillQuery（searchQuery）；
}
console.log（filterName）；
renderSearchElement（过滤器名称）；
console.log（i++）；
如果（谷歌的类型！=“未定义”）{
如果（！searchQuery）{
if（google.search.cse.element.getElement（'main-search-button1'）.getInputQuery（））{
searchQuery=google.search.cse.element.getElement（'main-search-button1'）。getInputQuery（）；
}else if（google.search.cse.element.getElement（'main-search-button2'）.getInputQuery（））{
searchQuery=google.search.cse.element.getElement（'main-search-button2'）.getInputQuery（）；
}
}
var input=document.getElementById（'cse-search-input-box-id'）；
var element=google.search.cse.element.getElement（'main-searchresults'）；
如果（searchQuery==“”）{
元素。clearAllResults（）；
}否则{
元素。执行（searchQuery）；
}
返回false；
}否则{
setTimeout（executeQuery，500）；
}
}
//设置超时（executeQuery，1000）；
//document.forms[“myform”].submit（）；
var myCallback=函数（）{
如果（document.readyState=='complete'）{
searchQuery=getParameterByName（'q'，window.location.href）；
renderSearchTextboxElement（）；
执行权（“”）；
}否则{
setOnLoadCallback（函数（）{
renderSearchTextboxElement（）；
执行权（“”）；
}，对）；
}
};
窗口。\uuu gcse={
回调：myCallback
};
（功能（）{
var cx='123:456'；//在此处插入您自己的自定义搜索引擎ID
var gcse=document.createElement（'script'）；gcse.type='text/javascript'；gcse.async=false；
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）；
})();
函数getParameterByName（名称、url）{
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g，”）；
}

从未使用过gcse，但您是否应该在jquery标识符中有2个hashtag？我可能错了

var element = google.search.cse.element.getElement('element1);
element.execute('news');

(function() {
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    //var s = document.getElementsByTagName('script')[0];
    var s = google.search.cse.element.getElement('search');

    // do the search:
    var searchTerm = $('##search-q').val();
    s.execute(searchTerm);

    s.parentNode.insertBefore(gcse, s);

  })();

  $('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

searchhelper.perform_google = function(){

    if(typeof(google)!='undefined'){
        google.search.cse.element.render({
            div: "google-search-results",
            tag: 'searchresults-only',
            gname: 'google-results-gname'
        });
        var element = google.search.cse.element.getElement('google-results-gname');
        var query = $('##search-q').val();
        element.execute(query);
    }
};

(function(){
    // add the google custom stuff:
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

window.__gcse = {
  parsetags: 'explicit',
  callback: function(){
    searchhelper.search('all');
  }
};