Calling SharePoint Search Using REST from JavaScript

call sharepoint search using restapi javascript.png
InfoPath alternatives for form designing SharePoint

SharePoint 2013 provides a very powerful endpoint, which you can use to retrieve search result and query suggestion. The first thing which we have seen is the available search endpoints

Endpoint
http://[host]/[site]/_api/search/query
http://[host]/[site]/_api/search/postquery
http://[host]/[site]/_api/search/suggest

The simplest way to run a query against REST API is to pass a keyword query. There are two basic ways to run searches, where one is by sending the search parameters through the RESTful URL and the other by sending them through the query or suggest endpoints. The querytext can be any legal keyword query language construction, including managed properties and operators. So far we’ve just looked at executing a basic query, where the query text is specified. Here are a couple of other common operations, which you might want to do.



Operation Sample REST URL
Specify the maximum number of record to return /_api/search/query?querytext=’search term’&rowlimit=100
Specify a start row (i.e. in paging) /_api/search/query?querytext=’search term’&startrow=11
Specify a number of results to return /_api/search/query?querytext=’search term’&startrow=11&rowlimit=10 (but note 10 is the default)
Specifies the list of properties to sort the search results by. /_api/search/query?querytext=’terms’&sortlist= ‘Title:ascending’
Specify particular (managed) properties to return /_api/search/query?querytext=’search term’&selectproperties=’Author,Path,Title’
Use a search Result Source (i.e. a scope) /_api/search/query?querytext=’search term’&sourceid=’B09A7990-05EA-4AF9-81EF-EDFAB16C4E31′ (this ex. is to search the ‘People’ result source)

Read some SharePoint online tutorials:

– Download FREE PDF on HUB site in SharePoint online

– SharePoint Online modern experience

– SharePoint Online branding Creating Tabbed Menu using Bootstrap and HTML in SharePoint 2016/2013

Below specifies the unique key identifier of the Result Source to use for executing the search queries,

Result Source ID
Documents e7ec8cee-ded8-43c9-beb5-436b54b31e84
Items matching a content type 5dc9f503-801e-4ced-8a2c-5d1237132419
Items matching a tag e1327b9c-2b8c-4b23-99c9-3730cb29c3f7
Items related to current user 48fec42e-4a92-48ce-8363-c2703a40e67d
Items with same keyword as this item 5c069288-1d17-454a-8ac6-9c642a065f48
Local People Results b09a7990-05ea-4af9-81ef-edfab16c4e31
Local Reports And Data Results 203fba36-2763-4060-9931-911ac8c0583b
Local SharePoint Results 8413cd39-2156-4e00-b54d-11efd9abdb89
Local Video Results 78b793ce-7956-4669-aa3b-451fc5defebf
Pages 5e34578e-4d08-4edc-8bf3-002acf3cdbcc
Pictures 38403c8c-3975-41a8-826e-717f2d41568a
Popular 97c71db1-58ce-4891-8b64-585bc2326c12
Recently changed items ba63bbae-fa9c-42c0-b027-9a878f16557c
Recommended Items ec675252-14fa-4fbe-84dd-8d098ed74181
Wiki 9479bf85-e257-4318-b5a8-81a180f5faa1

Example

I wanted to search for the people, the key learning here is that you specify the content sources via its GUID.

call sharepoint 2013 search using restapi javascript.jpg
call sharepoint 2013 search using restapi javascript.jpg

Use the procedure given below to create a sample.



Step-1:

Navigate to your SharePoint 2013 site. From this page, select Site Actions -> Edit Page. In Edit the page, go to the Insert tab in the Ribbon and click Web Part option. In Web Parts picker area, go to the Media and Content category, select the Script Editor Web Part and press the Add button.

Step-2:

Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert HTML and/or JavaScript, as shown below.

  1. <script src=”/Scripts/jquery-1.10.1.min.js” type=”text/javascript”></script>
  2. <script type=”text/javascript”>
  3.     $(document).ready(function() {
  4.         $(“#SearchQuery”).click(function() {
  5.             $.ajax({
  6.                 url: window.location.protocol + “//” + window.location.host + “/_api/search/query?querytext='” + $(“#search-input”).val() + “*’&sourceid=’b09a7990-05ea-4af9-81ef-edfab16c4e31’&rowlimit=’100’&selectproperties=’PictureURL, PreferredName, Country'”,
  7.                 headers: {
  8.                     “Accept”: “application/json; odata=verbose”
  9.                 },
  10.                 contentType: “application/json; odata=verbose”,
  11.                 success: function(data) {
  12.                     var results;
  13.                     var divHTML = ”;
  14.                     var Picurl;
  15.                     if (data.d) {
  16.                         if (data.d.query) var users = newArray();
  17.                         results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
  18.                         for (i = 0; i < results.length; i++) {
  19.                             var item = results[i];
  20.                             var itemCell = item.Cells;
  21.                             var itemResults = itemCell.results;
  22.                             //Get Values for User
  23.                             var userPic = getValueByKey(“PictureURL”, itemResults);
  24.                             var fullname = getValueByKey(“PreferredName”, itemResults);
  25.                             var CountryName = getValueByKey(“Country”, itemResults);
  26.                             if (userPic != null) {
  27.                                 Picurl = userPic;
  28.                             } else {
  29.                                 Picurl = ‘/Style Library/styles/images/tempPic.png’;
  30.                             }
  31.                             // alert(PicId);
  32.                             divHTML += ‘<div class=”item”>’ + ‘<div class=”id”>’ + ‘<div class=”ms-tableCell ms-verticalAlignTop”>’ + ‘<div class=”ms-peopleux-userImgDiv”>’ + ‘<div class=”ms-imnSpan”>’ + ‘<div style=”width: 36px; height: 30px;” id=”ImgPicSpan1″ class=”ms-peopleux-userImgWrapper ms-subtleLink ms-peopleux-imgUserLink”>’ + ‘<img style=”cliptop: 0px; clipright: 36px; clipbottom: 36px; clipleft: 0px; min-height: 30px; max-height:30px; min-width: 30px; max-width: 30px;” id=”PictureDiv1″ class=”ms-peopleux-userImg” src=”‘ + Picurl + ‘”/>’ + ‘</div>’ + ‘</div>’ + ‘</div>’ + ‘</div>’ + ‘<div id=”PersonNameDiv” class=”ms-tableCell ms-verticalAlignTop” >’ + ‘<div> ‘ + fullname + ‘ </div>’ + ‘<div class=”place”>’ + CountryName + ‘ </div>’ + ‘</div>’ + ‘</div>’ + ‘</div>’ + ‘</div>’ + ‘</div>’ + ‘</div>’
  33.                         }
  34.                         $(“#Result”).html(divHTML);
  35.                     }
  36.                     elseif(data.d.postquery)
  37.                     results = data.d.postquery.PrimaryQueryResult.RelevantResults.Table.Rows.results;
  38.                     else throw “Results not found”;
  39.                 }
  40.             });
  41.         });
  42.         function getValueByKey(key, results) {
  43.             var postItem = $.grep(results, function(e) {
  44.                 if (e.Key === key) returne;
  45.             })[0].Value;
  46.             returnpostItem;
  47.         }
  48.     });
  49. </script> <input type=”text” id=”search-input”> <input type=”button” id=”SearchQuery” value=”Search”>

<div id=”Result”></div>

Final Output:

call sharepoint search using restapi javascript.png
call sharepoint search using restapi javascript.png

Hope this will be helpful.

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply