SharePoint 2013 Hosting – HostForLIFE.eu :: How to Do a SharePoint 2013 Search using REST and JavaScript ?

This post will guide you how to do a SharePoint 2013 Search using REST and JavaScript. This example shows the way to do a search using the SharePoint 2013 REST API. during this sample we are going to produce a page with a search box that displays results in a grid. to get started, produce a new SharePoint-hosted app. Then, you need to grant permissions to the App to use a search.

Develop the project using the subsequent method within the NAPA Tool

On your Developer site, open the “Napa” office 365 Development Tools then select Add New Project.
Select the App for SharePoint template, name the project create site then select the create button
Replace APP.js with the following source code below.
Publish Your App.

The following is an important procedure to be done before creating the app. Specify the permissions that your app needs as in the following. Choose the Properties button at the bottom of the page. In the Properties window, choose Permissions. In the Content category, set the Write permissions for the Tenant scope. In the Social category, set the Read permissions for the User Profiles scope. Then, close the Properties window.

Now, edit the Default.aspx to add the HTML for our search box and button as well as a div tag to hold the results. Write the following code:

<div>
   <label for="searchTextBox">Search: </label>
   <input id="searchTextBox" type="text" />
   <input id="searchButton" type="button" value="Search" />
</div>    
<div id="resultsDiv">
</div>

<div>

<label for="searchTextBox">Search: </label>

</div>

</div>

Now, you should edit App.js to include your script to query the search and display the results. Add a click event handle to your document ready function. Then, write the following code:

   var context = SP.ClientContext.get_current();
          // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
   $(document).ready(function () {        
       var spAppWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
              $("#searchButton").click(function () {
           var queryUrl = spAppWebUrl + "/_api/search/query?querytext='" + $("#searchTextBox").val() + "'";
                  $.ajax({ url: queryUrl, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: onQuerySuccess, error: onQueryError });
       });        
   });        
   function onQuerySuccess(data) {
       var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;       
       $("#resultsDiv").append('<table>');        
       $.each(results, function () {
           $("#resultsDiv").append('<tr>');
           $.each(this.Cells.results, function () {
               $("#resultsDiv").append('<td>' + this.Value + '</td>');
           });
           $("#resultsDiv").append('</tr>');
       });
              $("#resultsDiv").append('</table>');
   }        
   function onQueryError(error) {
       $("#resultsDiv").append(error.statusText)
   }        
   //function to get a parameter value by a specific key
   function getQueryStringParameter(urlParameterKey) {
       var params = document.URL.split('?')[1].split('&');
       var strParams = '';        for (var i = 0; i < params.length; i = i + 1) {
           var singleParam = params[i].split('=');
           if (singleParam[0] == urlParameterKey)
               return decodeURIComponent(singleParam[1]);
       }
   }

var context = SP.ClientContext.get_current();

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model

$(document).ready(function () {

var spAppWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));

$("#searchButton").click(function () {

var queryUrl = spAppWebUrl + "/_api/search/query?querytext='" + $("#searchTextBox").val() + "'";

$.ajax({ url: queryUrl, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: onQuerySuccess, error: onQueryError });

});

function onQuerySuccess(data) {

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

$("#resultsDiv").append('<table>');

$.each(results, function () {

$("#resultsDiv").append('<tr>');

$.each(this.Cells.results, function () {

$("#resultsDiv").append('<td>' + this.Value + '</td>');

});

$("#resultsDiv").append('</tr>');

});

$("#resultsDiv").append('</table>');

}

function onQueryError(error) {

$("#resultsDiv").append(error.statusText)

}

//function to get a parameter value by a specific key

function getQueryStringParameter(urlParameterKey) {

var params = document.URL.split('?')[1].split('&');

var strParams = ''; for (var i = 0; i < params.length; i = i + 1) {

var singleParam = params[i].split('=');

if (singleParam[0] == urlParameterKey)

return decodeURIComponent(singleParam[1]);

}

Publish:

Output:

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options.

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Do a SharePoint 2013 Search using REST and JavaScript ?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Do a SharePoint 2013 Search using REST and JavaScript ?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags