Calling SharePoint Search Using REST From JavaScript

Introduction

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)

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.

Use the procedure given below to create a sample.

Step 1

Navigate to your SharePoint 2013 site.

Step 2

From this page, select Site Actions | Edit Page.

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 3

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.

<script src="/Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#SearchQuery").click(function() {
            $.ajax({
                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'",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                contentType: "application/json; odata=verbose",
                success: function(data) {
                    var results;
                    var divHTML = '';
                    var Picurl;
                    if (data.d) {
                        if (data.d.query) var users = newArray();
                        results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
                        for (i = 0; i < results.length; i++) {
                            var item = results[i];
                            var itemCell = item.Cells;
                            var itemResults = itemCell.results;
                            //Get Values for User
                            var userPic = getValueByKey("PictureURL", itemResults);
                            var fullname = getValueByKey("PreferredName", itemResults);
                            var CountryName = getValueByKey("Country", itemResults);
                            if (userPic != null) {
                                Picurl = userPic;
                            } else {
                                Picurl = '/Style Library/styles/images/tempPic.png';
                            }
                            // alert(PicId);
                            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>'
                        }
                        $("#Result").html(divHTML);
                    }
                    elseif(data.d.postquery)
                    results = data.d.postquery.PrimaryQueryResult.RelevantResults.Table.Rows.results;
                    else throw "Results not found";
                }
            });
        });

        function getValueByKey(key, results) {
            var postItem = $.grep(results, function(e) {
                if (e.Key === key) returne;
            })[0].Value;
            returnpostItem;
        }
    });
</script> <input type="text" id="search-input"> <input type="button" id="SearchQuery" value="Search">
<div id="Result"></div>

Final Output

For a more comprehensive reference, the best source which I can find is SharePoint 2013 Search REST API on MSDN.