2015-12-13 169 views
1

我想实现在一个有角度的js网站谷歌自定义搜索。 当我点击搜索按钮时,它不会显示任何东西,但网址更新为网址。 我已经按照谷歌文档中提到的步骤。 我不知道我在做什么错了?在angularjs中实现谷歌自定义搜索

我的搜索栏位于主页上 -

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

我的搜索结果有 -

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

任何输入是非常赞赏。

感谢,

回答

2

你可能有一个以上的问题,在同一时间发生的事情......

1.查询参数不匹配

searchresults-onlygcse:searchbox-only指定queryParameterName不匹配。

的index.html

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

Search.html

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

2. Angular.js阻止谷歌CSE

的流动在正常情况下, Google搜索元素将触发HTTP GET w ith搜索参数。但是,由于您正在处理单页应用程序,因此您可能看不到查询参数。如果当你的目标resultsUrl="#/searchresult"这种怀疑是真的,那么你有两个选择:在resultsUrl =

  1. 强制HTTP GET “的http:// YOURWEBSITE /信息搜索结果”。您可能必须匹配路线,或沿着这些线路来捕捉REST请求(Ember.js很容易实现,但我还没有在Angular.js中完成)。
  2. 使用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); 
})(); 

我有index.html的代码的live version,但我不做出承诺说会因为它是在我的NDSU FTP中托管的,所以永久生活。