Recently, I had a request to add a text label to the Sort By field in a SharePoint 2013 Search Center, so that end users would more quickly figure out what the field floating in the middle of the results page was for. This is a quick tip for those looking to do the same thing.
Enable Sorting in Search Results
To enable the Sort By feature in a search results page, perform the following steps:
- Edit the Search Results page
- Modify the Search Results Web part
Under the “Settings” heading, click Show sort dropdown
When viewing the search results page, you should now see a field floating under the Search Navigation, but above the actual search results. In this case, the request was to add a text label next to the field to make it more clear what its purpose was:
Add a Label to the Sort By Field
Initially, I thought it would be simple to use jQuery, which was already in the environment, to just find the structure in the DOM and insert a field label. In looking at the generated DOM in the page, I could see the following structure:
However, I found after several attempts to get a handle on #Sortby or #SortbySel using jQuery, that there was a timing issue between jQuery attempting to get ahold of the DOM structure, and SharePoint actually generating the elements. Using several event methods with jQuery, I kept coming up with null references. This should be simple, so time for a new approach… which reminded me of a comic I had seen on Hugh Wood’s blog:
In this particular case, the end users of the Search Center were all using IE 11 and/or Google Chrome, so we had modern web browser capabilities at our disposable. Since I had the DOM structure, and knew what the HTML markup was for the field and its containers, I decided to use the CSS ::before selector to dynamically generate the field label.
I added an Alternate CSS file to the Search Center site settings, and used the following CSS to generate the label:
content: “Sort By: “;
Once the CSS was added, we now had a label on the Sort By field, without timing issues!