In our SP Server 2013 environment we have an employee directory. The hover panel that shows up next to a result shows the Department name of an employee. This is a clickable hyperlink. When a user clicks on it, he's being taken to a new search results page with the Department name as the query.

Problem is:

The Department name contains characters such as & or +. When the link is clicked, everything after the & is gone. Or, in case of the +, the + sign is removed. This results in incorrect search results.

I checked the code in the People hover panel display template and it says (Afdeling means Department):

<div class="ms-srch-hover-text" id="_#= ctx.CurrentItem.Department =#_">Afdeling: <a href="?k=department:_#= ctx.CurrentItem.Department =#_">_#= ctx.CurrentItem.Department =#_</a></div>

In the search engine, when a user clicks on the Department name in the hover panel, the resulting url being created is:


( P&I/L&M/SASO/SASOB is the Department name).

I think the Department code should be in double quotation marks ("") to ensure it processes the entire Department name as the query, not just what's before the & character.

How can I fix this in the display template? Or should something else be changed?

1 Answer 1


The problem is that your browser thinks you are adding querystring parameters. In order to make it work, you will have to encode the department names. The "&" ampersands should become this "%26".

The encoding of your departments can be done by using the following JavaScript function:


So in your example you can write the HTML like this:

<div class="ms-srch-hover-text" id="_#= ctx.CurrentItem.Department =#_">Afdeling: <a href="?k=department:_#= encodeURIComponent(ctx.CurrentItem.Department) =#_">_#= ctx.CurrentItem.Department =#_</a></div>

The URL will be encoded like this:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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