Question

我正在尝试在角度js网站上实施谷歌自定义搜索。当我点击搜索按钮时，它不会显示任何内容，但是网址会更新为网址。我已按照谷歌文档中提到的步骤进行操作。我不确定我做错了什么？

我的搜索栏位于主页上 -

<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>

我的搜索结果有 -

<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>

非常感谢任何输入。

谢谢，

Answer 1

您可能同时发生多个问题......

<强> 1。查询参数不匹配

您的searchresults-only与queryParameterName上指定的gcse:searchbox-only不符。

的index.html

<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>

Search.html

<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>

<强> 2。 Angular.js阻止了Google CSE的流程

在正常情况下，Google搜索元素会使用搜索参数触发HTTP GET。但是，由于您正在处理单页应用程序，因此您可能看不到查询参数。如果您在定位resultsUrl="#/searchresult"时怀疑是真的，那么您有两种选择：

在resultsUrl =＆＃34; http：// YOURWEBSITE / searchresult＆＃34;上强制HTTP GET。您可能必须匹配路由或沿着这些行的某些东西才能捕获REST请求（Ember.js很容易这样做，但我还没有在Angular.js中完成。）
使用JQuery和Angular.js在Index.html上获取用户的输入，并在search.html上手动触发搜索。你会怎么做？对于index.html，您可以执行类似下面的操作，对于结果，您将实现类似于我在另一个post中回答的内容。

的index.html

<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>

Index.js

//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
  callback: googleCSELoaded
}; 
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
  $(".gsc-search-button").click(function() { 
    $("#search_button_hook").text('HOOK ACTIVATED');
  });
  $("#gsc-i-id1").keydown(function(e) {
  if (e.which == 13) {
    $("#enter_keyboard_hook").text('HOOK ACTIVATED');
  }
  else{
    $("#search_text_hook").text($("#gsc-i-id1").val());
  }
  });
}

(function() {
  var cx = '001386805071419863133:cb1vfab8b4y';
  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);
})();

我有一个live version的index.html代码，但由于它是在我的NDSU FTP中托管，因此我不会做出永久有效的承诺。

在angularjs中实现谷歌自定义搜索

1 个答案: