Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Brandon Brigham
Brandon Brigham
3,716 Points

How to make default text in google custom search bar?

Hello please visit the site I'm working on:

http://everythingpropertymanagement.com

You will find a custom google search bar - How can I put in my own default text in the bar?

Thanks for any help!

marc kimbrey
marc kimbrey
12,156 Points

have you tried adding a placeholder inside the input. <input type="textarea" placeholder="default text">

Brandon Brigham
Brandon Brigham
3,716 Points

No how would I go about doing something like that?

marc kimbrey
marc kimbrey
12,156 Points

place placeholder="default text" inside the input tag of the html.

<input type="text placeholder="default text>

Brandon Brigham
Brandon Brigham
3,716 Points

Hey Marc - so this is the code I have for the Google Custom Search engine

            <div style="background-color:#800000;">
<gcse:search>

<script>
  (function() {
    var cx = '002024933341910502043:dokgag-kyzm';
    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);
  })();
</script>

</gcse:search>
</div>
            ```
Zhihao Wang
Zhihao Wang
9,687 Points

Quick question. Why are you not using html to create a search input?

Brandon Brigham
Brandon Brigham
3,716 Points

Zhihao Wang well I'm using Google Custom Search for its search capabilities and am trying to customize it but having issues in doing so

Brandon Brigham
Brandon Brigham
3,716 Points

jQuery is being used on this site yes

Zhihao Wang
Zhihao Wang
9,687 Points

The line of code should be injected after you have created the google custom search. If that still doesn't work, look at your css and see if there are any styles being applied that somehow hide the placeholder text.

3 Answers

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

Hello Brandon,

You might want to try this. 

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

EDIT: Just passed that code into the console when I was on the website that you provided. Seems to have worked.

Cheers.

Brandon Brigham
Brandon Brigham
3,716 Points

Hi @Zhihao - So I tried putting that code into the page but it didn't work - maybe I placed it wrong? Can you send me an example of how the code should look with this function put in place? Thanks so much!

Zhihao Wang
Zhihao Wang
9,687 Points

Are you running jquery?

Lisa Crowley
Lisa Crowley
4,793 Points
Lisa Crowley
Lisa Crowley
4,793 Points

Hi there, I know this is an old question, but I had the same issue too and was not running Jquery. Here is the solution we used:

    <script>
      (function() {
        var cx = 'XXXXXXXXXXXXXXXXXX:YYYYYYYYYY';
        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);
      })();
      window.onload = function(){
      document.getElementById('gsc-i-id1').placeholder = 'Search';
    };
    </script>
    <gcse:search>
    </gcse:search>

We added the 

      window.onload = function(){
      document.getElementById('gsc-i-id1').placeholder = 'Search';

Which seemed to do the trick. Keep in mind if you are using the unpaid version there will be a watermark image though.

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

I created my own form with a class, and then manipulated with jQuery. Here, I don't use CSE search input code at all - I only use the search results code, leaving things open to style input code however I want.

<form role="search" class="form-cse">
     <input type="search" placeholder="I'm Looking For..." />
     <button type="submit">
         <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
      </button>
</form>

// Google CSE
/* When a submit button attributed to an input of type "search" is triggered, we just need to get the text from the search box, and pass it to the Google CSE results page as a 'q' parameter. */
var searchForm = $('.form-cse'); // Get the form

$(searchForm).submit(function(event) { // Listen for a submission.
    event.preventDefault(); // Stop the submission from just passing through.
    var q = $(this).find('input').val(); /* Find the child input field and get its value. */

    // Developer's Note: Update this URL to reflect the proper base for 'live' version!
   window.location.replace('http://vision-demo-server.tech/mocoil/results.html?q=' + q); // http://www.w3schools.com/jsref/met_loc_replace.asp
});