I have a page that has a search box web part and I would like to add some search refiners underneath the web part. See the example below:

[  Search...                                ]   Advanced
[___________________________________________]   Preferences

Year:     [] 2011
          [] 2012
          [] 2013

So in this case I'd like to be able to refine the search by allowing users to check one or more dates (years). If a user selects 2011 and 2012, the user should only see search results of documents that have the value "2011" or "2012" in their "Year" column.

How exactly can I apply this? So far I've just added a content editor web part with some simple HTML in it to illustrate how it should look like, but there is no functionality at all and I'm not sure on where to begin.

Any help is greatly appreciated.

  • Can you use server side code.. From your previous questions, I think you don't have permissions or you don't like! – Arsalan Adam Khatri Apr 9 '14 at 13:30
  • It is only recently (2 weeks) that I am allowed to use server side code, but for this it is preferred in JavaScript. Anything I make server-side first has to be tested over and over until it is safe enough to use on the production environment, and this is a rather urgent request. – Magali Apr 9 '14 at 13:32

Refinement occurs AFTER the query. What you are attempting is more like the Advanced Search offered in SharePoint. The end user can select a link for "Advanced Search" and be taken to Advanced.aspx in the search center. The Advanced Search page contains a web part that you can alter to meet your needs. I would start with that to see if you can get your desired results.

If that does not work for you another alternative is to create a simple HTML form with your desired fields and then on submit construct the query string to match the query.

  • I had just finished writing some HTML to do this. I'm not using a form though, just input fields. Then with some JavaScript I detect which field was clicked and then store the value. Based on the value, I build the query string and at the end I always replace the onkeypress attribute from the searchbox so that it contains the original search string + the query. I will post the code soon, as I first need to test it thoroughly. – Magali Apr 10 '14 at 14:57
  • @Magali. Can you show us the code ? Even if not well polished it would be usefull. – frenchone Mar 22 '17 at 13:35

You will have to add a Refinement Panel web part to that page under your search box web part.Also add Search results web part to page if not already added and configure the refinement webpart target as that Search results webpart. You can look into this blog to know about setting refinement panel in SP 2013.

Also, if you want to refine your search depending on some custom column value. You will have to add a new managed property make it Crawlable,Queryable and Refinable.See this blog for the same.

You should perform a full crawl afterwards to refine by that property.

  • But if I have a search box wp, a refinement panel wp and a search results wp on one page, won't that make it so that all the results will be shown on that page? Because the results should actually be shown on another page, not on the same page as where the users define their search. The idea is that a user first has to refine what they will be searching for, and then do the search. – Magali Apr 9 '14 at 13:44
  • @Magali are you trying to use OOTB SP 2013 search mechanism? Or are you trying to create some custom search functionality for 1 list/library? – Unnie Apr 9 '14 at 13:46
  • It is for all lists and libraries. They all have a column named "Year" in which a year is given that applies for that item or document. I'm open for OOTB solutions or default SP solutions or whatever might be available to do this, but I'm really just looking for the most efficient way to do this. Currently I'm experimenting with JavaScript. If a certain box is checked, I add a string to the search box (eg.: (scope:"All Sites") Year=2011). – Magali Apr 9 '14 at 13:58
  • @Magali If you are planning to use the OOTB Search, then it is always good user experience that the Search box, refinement panel and Search results are in same page.The effecient way surely will be to leverage OOTB Refinement panel webpart which provides you to filter the results based on managed property. – Unnie Apr 9 '14 at 14:06

what your looking for is refiner web part in 2013. Its a big process to setup but you can look here for a step by step guide:





I know what your asking for but its not easy!

what you want is to add in refinment values after a selection is made. but this is not easy... what if they make the selection first and then add in the search word?

so you made the checkboxes... you now need to make some refinment values. see url below for values


The search would be replaced with one that you make. the url is what will be generated when you click the button causing a redirect:


so do you get where im going? you need to build the searchbox (html), the checkbox (html)... javascript gets executed when button is clicked.. its builds the url and adds the search term with the selected filter option that is selected and then triggers a redirect to the search page!

  • But the refiner web part only works on the search results page. It does not work when I add it to the page that has the search box web part. Edit: I didn't do that downvote. – Magali Apr 9 '14 at 13:27
  • just ammended my answer! – Ali Jafer Apr 9 '14 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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