SharePoint Search Using REST API

In this post, we will learn how we can consume SharePoint Search using REST API. We will build a click-through interface which will act like a refiner and will provide you with refined results which I have further refined at multiple levels. I am displaying the final results in a table.

Sometimes we get a requirement to create our own search functionality using REST APIs where we simply want to display the result in a table or grid and want to modify the search result and refiners based on our requirement. 

 

So, here I will provide you with detailed steps of consuming SharePoint Search using REST API. As mentioned above, we will build a click-through interface which will act like a refiner to provide refined results. The final results will be shown in a table that will look like the below image.

 

 

Here, you can see the click-through interface of the search results along with breadcrumbs on the top of the page.

 

These search results are basically refiners that I am getting by applying filters on the results. These refiners can further be dug into to get the sub-refiners of the refiners.

  

Step 1

 

In order to apply refiners in REST API, you need to use the following query.

var spListURL = "https://yourdomain.sharepoint.com/teams/subsite/_api/search/query?querytext='Path:https://yourdomain.sharepoint.com/teams/subsite'&rowlimit=500&refiners='Plant'";
spListURL+="&refinementfilters='Plant:equals(\""+plantFilter+"\")'";

Here, "Plant" is my custom refiner in my SP Site.

 

Step 2

 

In order to display the results from the above query, you need to write the following code in the Success method. 

var refinements = data.d.query.PrimaryQueryResult.RefinementResults.Refiners.results[0].Entries.results;
var searchRefinementHtml = '';
$.each(refinements, function(index, refinement) {
    //searchRefinementHtml += '<a href="#" id="'+refinement.RefinementValue+'" onclick="childMethod(this)" >'+refinement.RefinementValue + " (" + refinement.RefinementCount + ")"+'</a><br/>';
    searchRefinementHtml += '<a href="#" id="' + refinement.RefinementValue + '" onclick="childMethod(this)" >' + refinement.RefinementValue + '</a><br/>';
});

Here, "refinements" will provide you with the collection of subrefiners available under refiners.

 

The subrefiners collection will look like the following image.

 

 

 

Step 3

 

Once you have got all the subrefiners inside refiners, you can use the following REST API query to get results.

var spListURL = "https://yourdomain.sharepoint.com/teams/QA-Quality/_api/search/query?querytext='Path:https://yourdomain.sharepoint.com/teams/QA-Quality'&rowlimit=500&selectproperties='Filename,DocNumber,DocumentType,Business,Plant,Region,LocationType,ProductLine,DocLanguage,DocumentStatus,DraftNo,ProductName,Path,Url'";
spListURL+="&refinementfilters='and(Plant:equals(\""+plantFilter+"\"),Business:equals(\""+BusinessVal+"\"),ProductLine:equals(\""+ProductLineVal+"\"),ProductName:equals(\""+e.id+"\"))'";

Here, I have passed my column managed metadata property using "selectproperties" which I have configured earlier. If you have not configured it yet, you need to configure that first.

 

Step 4

 

To bind the returned results with HTML, you can use the below code in Success method.

var itemData = [];
itemData = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;

Here, 'itemData' will hold all results including your managed metadata column value.

 

Conclusion 

 

With the above code, we can achieve search results from our SharePoint site and can later bind that with HTML based on our requirement with different look and feel. You can refer to the complete code attached with this post for your reference.

 

Happy Coding!!!