0

i have written the below jquery to remove the text “search this site”. it is working fine . but on mouse over it is still showing the old text i.e ” search this site”. Also when I now try to insert a search term I first have to blank out the initial text – it’s not automatically blanked out when selecting the search box. Do you have a fix for this? Below is my jquery function:

$(function() {
var theSearchBox = $(‘#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox’);
var defaultSearchText = “Search this site”;
var preferredSearchText = “Search the Homepage Content”;
//replace the text initially
theSearchBox.val(preferredSearchText);
theSearchBox.focus(function() {
if ($(this).val().indexOf(defaultSearchText) > -1)
$(this).val(preferredSearchText);
});
theSearchBox.blur(function() {
if ($(this).val().indexOf(defaultSearchText) > -1)
$(this).val(preferredSearchText);
});
});
1

An alternative and recommended way to change the search box's prompt is to make changes to the master page or modify the 'Control_SearchBox_Compact.html' display template. Modification to the master page is the easiest options since you're only looking to change the initial prompt. This involves replacing the delegate control for the search with a web part control.

1- Add the following to your master page:

<%@Register TagPrefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>

2- Replace the search delegate control Replace

<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />

with

<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server" InitialPrompt="Your Custom Text Goes Here"></SearchWC:SearchBoxScriptWebPart> 
0

hi on mouse over it would show tool tip for the control, check whether the control have a attribute called 'title' if so change the content of the attribute with the required value like

theSearchBox.attr('title',preferredSearchText);

include the above line in your jquery probably it would change the text on mouse over.

  • That's Cool :-). Can you please tell me how to solve when I try to insert a search term I first have to blank out the initial text – it’s not automatically blanked out when selecting the search box. – santosh kondapalli Dec 22 '14 at 10:13
  • 1
    hi you can remove the content on focus of the control and replace the content if no values are entered the below code would help you theSearchBox.attr('onfocus','if(this.value=='+preferredSearchText+'){this.value="";}'); and for onblur to insert the content if nothing is entered theSearchBox.attr('onfocus','if(this.value==""){this.value='+preferredSearchText+';}'); – Anandakrishnan Dec 23 '14 at 4:05
  • place both the line in document ready function – Anandakrishnan Dec 23 '14 at 4:06
0

Now a days almost all browser support HTML5. So why not we take advantage of it

theSearchBox.attr("placeholder",preferredSearchText);

hope it will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.