Office 365/SharePoint 2013 – Dropdown refinement panels display templates in 5 minutes.

Dropdown in refinement panel

One of my requirements today was to implement dropdowns which filter content in a search results web part. So something that looks like this:

I want to do this quickly, so I’m not cleaning up any code. Simply reuse an out of the box display template.

Your solution

First I took a copy of the out of the box refinement file filter_default.html and I renamed this to filter_dropdown.

Then I change the title of the file:

<title>Refinement Dropdown Item</title>

As I want the same functionality but just change the representation this can’t be too difficult.

To create a drop down I need to get html that looks a bit like this:

<select id='Container'>
    <option value="select">Option 1</option>
   <option value="select">Option 2</option>
</select>

So first I put my select and a “please select …” option. straight after the title:_#=

Srch.U.collapsibleRefinerTitle(ctx.RefinementControl.propertyName, 
ctx.ClientControl.get_id(), 
refinerCatTitle, 
iconClass) =#_
<select id='Container'><option value="select">Please select ...</option>

and of course close the select  near the end of the file (simply replace a </div> with </select> will do the job:

_#-->

<!--#_

}

_#-->

</select>

<!--#_

}

}

_#-->

</div>

Now we need to have a look at how the options are generated within the out of the box display template. All the options are generated within the outputFilter function.

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts)

I’ve added selected as an additional parameter:

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts, selected)

I’m using selected mark an option as selected

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts, selected) {

var aOnClick = "$getClientControl(this)." + method + "('" + $scriptEncode(Sys.Serialization.JavaScriptSerializer.serialize(refiners)) + "');";

var nameClass = "ms-ref-name " + (showCounts ? "ms-displayInline" : "ms-displayInlineBlock ms-ref-ellipsis");

if (selected) {

_#-->

<option onclick="_#= aOnClick =#_" selected="_#= selected =#_" value="_#= $htmlEncode(refinementName) =#_">_#= $htmlEncode(refinementName) =#_</option>

<!--#_

} else

{

_#-->

<option onclick="_#= aOnClick =#_" value="_#= $htmlEncode(refinementName) =#_">_#= $htmlEncode(refinementName) =#_</option>

<!--#_

}

};

So now we are nearly there. The drop down is already appearing but the html is still a bit messed up.

Remove all the <div>and< /div> section in the script and your job is done.

Now deploy the display template and finally, don’t forget to select the display template in your refinement property within the refinement web part.

Job done.