Dropdown in refinement panel
Table of Contents
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.
Remove all the …………………………………………..
and ………………………………………… WHAT?!
Hi Theodor,
Thanks. I corrected the formatting in the article.
Hi,
Could you please add the full code of the above article. Because I tried to replicate it but confused of the steps.
Hi Susanta,
Sorry I haven’t got the full code available anymore.