SP 2013 Content Search webpart change data based on Drop down list selection

Question

In my page there is a content search webpart which displays data for each year. Now I have a drop down list in that same page (lets say inside a Content editor) which shows all years ie 2014,2013,2012 etc. There are two things which needs to be done:

1. By default when page loads the current year(2014) will be selected in dropdown and content search webpart will display only 2014 data.

2. On change of that dropdown list , i want the data in the content search webpart to show data for that particular year selected.

I have already set my mind for 2 approaches:

1. Send the year as a Querystring value and configure the content search webpart to get the value from querystring and filter data. On change of dropdownlist add new value to querystring and reload page.(not in favour of this since there are lot of other content also in that page)

2. Load all year data in the content search webpart and add a OOTB refinement panel with custom filter template to make it as a dropdownlist. when the dropdownlist selection changes no reload of page but refinement of the content search webpart data will be done.Also after loading the data, during page load using javascript i will have apply refinement to show 2014(maybe by triggering onchange event) .

Please help me make it better by giving some new ideas / refining what i have already stated. Any help would be highly appreciated.

Answer 1

I am currently tackling the same problem - there is a "no-code" solution for this entirely based on Display Templates - no deployment needed.

a) Change the Search Box Result with your year filter b) adjust the Result Control and adjust the Data Provider.

I got some inspiration from the following posts:

1. http://blog.evilking.com/2014/04/simple-search-based-birthdays-web-part.html
2. https://github.com/SPCSR/DisplayTemplates/blob/master/Search%20Display%20Templates/mAdcOW%20Search%20Center%20Templates/mAdcOWGraph/mAdcOW_Control_Graph.html

Answer 2

Okay here is what I implemented at the end.

1. Add a Search Box webpart in that page. This webpart can be connected to the content search webpart, using webpart properties. Hide this webpart using CSS.

2. Now in the content search webpart , edit the webpart properties and edit the query to accept data from the Search Box.

3. On change event of dropdownlist , dump the Query(ie the year dropdown value) into the Search box and click the search button using Jquery. Then SharePoint will take care of bringing the results (bcoz already Content Search WP is configured to take query from Search Box) without reloading the page

Answer 3

You don't really need to take a search box and set the value as in your answer, there's a more beautiful solution to this:

1. Configure CSWP to filter results on the basis of Query string
2. On drop down change event, change the query string value in the url
3. Don't reload the page, rather just refire the CSWP query with the help of dataProvider.issueQuery()