There are several pages that come up regarding this search-box customization and I really felt that the information does not address that if you jquery in the customized placeholder text on document ready, there's a flash of the default 'Search'. My solution was to hide it initially and add a 'loaded class then unhide it. There's a bunch of extra CSS in there but you should be able to get the general approach (and no longer have a flash of unwanted text!):

/* Hide initially */
input::-webkit-input-placeholder { color:transparent; }
input::-moz-placeholder { color:transparent; }
input::-moz-placeholder { color:transparent; }
input::-ms-input-placeholder { color:transparent; }

/* when we've added the .loaded class we kick in the opaque placeholder */

input.loaded::-webkit-input-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-moz-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-moz-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-ms-input-placeholder { color:transparent; }

input:focus::-webkit-input-placeholder {
opacity: 1;
}
input:focus:-ms-input-placeholder {
color: 1;
}
input:focus::-moz-placeholder {
opacity: 1;
}

Here's my javscript (within document ready as stated above already):

$('#query').attr('placeholder',"Have a question? Search our knowledge base the answer…").attr('autocomplete', 'off');

//Signify that we can unhide the placeholder
$('#query').addClass('loaded');