SharePoint Online/2013 Replace no results default text ‘Nothing here matches your search’ from search results web part

- February 13, 2018

As we all aware, SharePoint search have great potential to provide very powerful search solution. Couple of new webparts are added in SharePoint 2013, like Content Search web part for which I should use rather a word "Smart" search web part. With a new rendering mechanism, content search webpart becomes more and more simple to edit and customize. That mechanism is called "Display Templates" and these are based upon simple Json to HTML templates.

I recently has faced a project scenario, where I was asked to replace the part of search result web part and I provided a solution by updating search display template.

Requirement: When we add a search result web part on any result page along with a search text box web part to enter search keywords. Search results will be displayed in web part if keyword matches any text. When we add both these web parts on page and before entering the search term also the results web part show “Nothing here matches your search” (as shown in below image), which my users want to modify based on their content and want to add some useful links into it.

Blog1

Solution:

Initially, I thought that this may be easily updated using some web part property, but after researching about it, I found that there are html/json files called, display templates, which are responsible for rendering this text. Let me explain how to find them and which Display Template we need to customize in order to achieve our target.

All kind of Display Templates are stored at the one location under master page gallery. Here are the steps to reach out to the html file.

Open the site collection.

Navigate to Site Settings.

Under Web Designer Galleries click on Master pages and page layouts

Now click on the folder Display Templates and then Search.

Under the search folder you will find html and .Js files present.

We are more intereste d in 'Control_SearchResults.html'. Make sure you click in html file not JS file with same name.

If you are not familiar with this structure then you must be thinking that "Why JS and HTML files with two names?"

In brief, actually display templates are JS files only but just to the sake of simplicity MS has provided HTML so that it is easier to modify/edit display templates. There is out of box event receiver attached to this list when there is any modification detected in HTML file, a new version of JS will be generated by the event receiver. Display Templates are actually split into two different files, the Control and the Item.

Control Display Template

This is the part of your design that does not get repeated as each items gets loaded in the Search Results. It’s the container around and where you refer to any custom CSS or JS files you may want to use.

Put simply, it’s the box where search results will be loaded.

Item Display Template

This is where you design how each item will look like and which managed properties from the result item will be used and where on the design. If I take my example above, that’s all in the Item Display Template. The size of the rectangle, where the Title goes and where the Description goes as well as the animation itself.

Search Results web part of SharePoint uses ‘Control_SearchResults.html’ display template which is available under Master Page Library –> Display Templates –> Search.

Now lets start actual modification of the template:

Download a copy of ‘Control_SearchResults.html’. Click Control_SearchResults.html template file and Download a Copy

Rename the downloaded file as Control_SearchResults_Custom.html. Open the control template file in any of your preferred editors such as SharePoint Designer and customize the file, as per our need.

Change the Title in this HTML file, this title will be available for selection in web part properties.

Now we want to get the search text entered in to search box web part, for that we will use ctx object as following ctx.DataProvider.get_currentQueryState().k

Search if(ctx.ClientControl.get_shouldShowNoResultMessage()){ line in HTML file (as shown in below image).

Find the unordered list just below that code and modify it according to your need.

For example if you don't want to show any message until user enters some keyword, replace if statement line with
var currentQueryTerm = ctx.DataProvider.get_currentQueryState().k; if(ctx.ClientControl.get_shouldShowNoResultMessage() && currentQueryTerm!=””){
(As shown in below image)

Save the modified HTML file.

Go to Master Page Library –> Display Templates –> Search and upload new control template.

You will see that respective ‘Control_SearchResults_custom.js’ will be created by SharePoint.

Now go to your page where Search Result web part is added, edit Search results web part. Under Display Templates section select newly uploaded display template.( as shown in below image).Select our custom control display template.