Adding placeholder to text box in google custom search engine in my html website

Question

I have added google custom search engine using following code.

(function() {
    var cx = '005899633628958982661:wekn1lpckzg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    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);
})();

Now I have a working search box for my site, the only problem is that I am unable to use placeholder for the search-text box.

I also tried the code

$('input.gsc-input').attr('placeholder', 'custom text here');

but it is not working.

are you calling this line withing document.ready? I don't see it in your code above — progrAmmar, Feb 01 '16 at 08:51
yes, it is uder document.ready.. i have also tried putting the code at the end of the page, but that too is not helping. — atul, Feb 01 '16 at 09:11
http://stackoverflow.com/questions/10688387/providing-placeholder-or-value-to-a-commercial-version-of-google-custom-search-b — Ferrmolina, Feb 01 '16 at 09:14
i just tried the above link, do i need to make any changes in the code or should i paste it as is? because pasting it as it is, is not helping either. — atul, Feb 01 '16 at 09:28

score 7 · Accepted Answer · answered Nov 04 '16 at 18:10

7

I used the following code, it worked for me!

(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 = 'SEARCH';
};

answered Nov 04 '16 at 18:10

suketup

469
7
12

I guess, document.getElementsByNames('search')[0].placeholder is much better.. because id of searchbox is random. – Anu Bhuvanendran Nair Jan 04 '17 at 09:08
If you are using GCS then id can be determined by inspect element. Because on complex pages there could be another element with the same name as 'search'! @AnuBhuvanendranNair document.getElementsByNames is not efficient and reliable way always. – suketup Jan 10 '17 at 23:07
Google custom search generates id 'gsc-i-id1' and sometimes 'gsc-i-id2'.. id value is random as of I understood. Then how document.getElementById is reliable ?? – Anu Bhuvanendran Nair Jan 11 '17 at 05:57
Well, It works perfectly on my live website for long time using id, so once it generates id for specific page it won't change it eventually as long as I know. You just need to find id by inspect element and you have to put it once only in the code. So For me id is SIMPLE and RELIABLE!! – suketup Jan 18 '17 at 20:59
id is identical on all sites that exact id is on 3 installations in my case. Thank you this solution worked well. – Artem Ankudovich May 15 '17 at 09:07

score 1 · Answer 2 · edited Oct 24 '16 at 18:27

1

This one works for me:

window.onload = demo;

function demo() {
    document.getElementById("gsc-i-id1").setAttribute("placeholder", "SEARCH")
}

edited Oct 24 '16 at 18:27

Peyman Mohamadpour

17,954
24
89
100

answered Oct 24 '16 at 18:01

ArnoldasM

186
1
3
16

Adding placeholder to text box in google custom search engine in my html website

2 Answers2

Linked