CODEWITHSUNDEEP
angularjsgoogle-custom-search
Jatin Waichal
Jatin Waichal

Reputation: 45

Implementing google custom search in angularjs

I am trying to implement google custom search in an angular js website. When I click on the search button it does not display me anything, but the url is updated to the url. I have followed the steps mentioned in the documentation by google. I am not sure what I am doing wrong?

My search bar is located on the home page as - 

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

my search result has - 

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

Any input is much appreciated.

Thanks,

Upvotes: 1

Views: 2170

Answers (1)

Deovandski
Deovandski

Reputation: 790

You may have more than one problem happening at the same time...

1. Query Parameter mismatch

Your searchresults-only does not match the queryParameterName specified on 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 is blocking the flow of Google CSE

Under normal circumstances, Google Search Element will trigger an HTTP GET with the search parameter. However, since you are dealing with a one-page application, you may not see the query parameter. If that suspicion is true when you target resultsUrl="#/searchresult", then you have two options:

  1. Force a HTTP GET on resultsUrl="http://YOURWEBSITE/searchresult". You may have to match routes, or something along those lines in order to catch the REST request (Ember.js is really easy to do so, but I haven't done in Angular.js yet.)
  2. Use JQuery alongside Angular.js to get the input from the user on Index.html and manually trigger a search on search.html. How would you do it? For the index.html you would do something like below and for the results you would implement something like I answered in another 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);
})();

I have a live version of the index.html code, but I don't make promises that will be permanently live since it is hosted in my NDSU FTP.

Upvotes: 2

Related Questions