OverviewWhen you configure a refinement as multi-value, the user is presented with the list of available filters with checkboxes:
With my Instant Refinement solution, all filters are displayed all of the time and when the user clicks on a checkbox, the results are instantly refined without the need to click on an Apply link.
This post describes a high level overview of the steps necessary for the instant refinement functionality. You may find the code and more detailed steps in my new Enhancing the Search Experience in SharePoint 2013 guide book.
Step 1: Modify or Copy the Multi Value Display Template
Using SharePoint Designer 2013, navigate to the Filters display templates. Copy or modify the Filter_MultiValue.html file. Edit the file in advanced mode.
Step 2: Store the Original FiltersAt the bottom of the display template add code to store the original set of refiners in a property of the RefinementControl object.
Step 3: Retrieve the Original Refiners
At the top of the display template you need to create a new array to store the original filters. Along with this you need to add logic to retrieve the previous refiners if they exist.
Step 4: Remove Condition from theRefiners Collection Creation
Scroll down the !hasNoListData condition block and remove the !hasAnyFilterTokens && check from the condition inside.
Step 5: Change Filter Tokens LogicScroll down to the hasAnyFilterTokens condition block and replace the refiners.push statement with code that just sets the IsSelected property to true if the refiner has been checked by the user.
Step 6: Save the Template Changes
Step 7: Modify the Controls in the Body Template
Modify or copy the Filter_MultiValue_Body.html file. Edit the file in advanced mode. Scroll to the bottom and find the submit link. Copy the onclick property. Paste the onclick into the checkbox inputs. Remove the Other and Submit divs sections from the bottom. Save the changes to the body file.
Step 8: Test the ChangesNavigate to your search page that contains the multi value refinements and review the experience:
You may click on each checkbox and watch the results instantly refine while always displaying all possible filters!!!
I improved this even further by creating a cascading solution for when you have multiple multi-value refinements!
GET ALL OF THE CODE AND DETAILED STEPS IN MY NEW SEARCH EXPERIENCE GUIDE:
SPECIAL LOW KINDLE PRICE!!!