Google Custom Search placeholder function in JavaScript

Question

Problem:

We have a Google Custom Search function that replaces the input placeholder attribute and it works okay.

Would you be so kind and help me with reviewing it, and if possible, provide an efficient function to replace this function with (also hoping that it would work with older version of IE and other browsers, not very necessary though):

Placeholder Script:

// google search placeholder
(function() { 
 var cx = '!!!!!!!!!!!!!!!!!!!';
 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);
})();
window.onload = function(){
 document.getElementById('gsc-i-id1').placeholder = 'e.g., United Stocks AMD';
};

where cx is a dynamic variable string parameter, defined as the custom search engine ID to use for a request (Custom Search API, ID for custom search).

Result Display Script:

<script>
 (function() {
 var cx = 'partner-pub-1444970657765319:8190375623';
 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);
 })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Popular Query Script:

<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>
<div id="queries"></div>
<script src="http://www.google.com/cse/api/partner-pub-1444970657765319/cse/8190375623/queries/js?oe=UTF-8&amp;callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>

Added CSS:

/*google custom search*/
.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{height:26px!important;margin-top:0!important;min-width:13px!important;padding:5px 26px!important;width:68px!important}
.cse .gsc-search-button-v2,.gsc-search-button-v2{box-sizing:content-box;min-width:13px!important;min-height:16px!important;cursor:pointer;border-radius:20px}
.gsc-search-button-v2 svg{vertical-align:middle}
.gs-title{line-height:normal!important}
.gsc-search-box-tools .gsc-search-box .gsc-input{padding:5px!important;color:#4169E1!important;border-radius:20px}
.gsc-input-box{background:none!important;border:none!important}

Screenshot Before Search:

enter image description here

Screenshot After Search:

Code Review Search

Screenshot for "Code Review" search:

Code Review Result

• kemicofa: What does cx refer to? Is that a fixed variable or is it dynamic?

Answer 1

So after testing it, you don't really need to define it in your javascript. You can simply add it in your HTML before all your other scripts.

That's what s.parentNode.insertBefore(gcse, s); does. It finds the first occurence of a script tag in your HTML (which is kind of funny as it won't work if there are no script tags in your HTML), and adds your new script before it.

So if the first occurence of a script tag appears in the HEAD, then it'll be placed in the head'

<script src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga" async type="text/javascript"></script>
<gcse:search></gcse:search>

Making your javascript more efficient will be difficult as 1. there isn't much happening and 2. it's already very short.

But you could do something like this (which doesn't change much)...

// google search placeholder
(function(cx) { 
 const gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = `https://cse.google.com/cse.js?cx=${cx}`;
 const s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
})('!!!!!!!!!!!!!!!!!!!');