Post
Ask Question

Query for Search value in SharePoint Site using REST, JQuery

This below code demonstrates how to query search using the SharePoint 2013 REST.

See Steps:

  1. Create a Separate page and a content editor Web part.

  2. Add the Below Code.

  3. I simply add a text box, a button, and a div to hold the results.

  4. Enter the query, click the button, and then see search results.

  1. <html>  
  2.   
  3.    <head>  
  4.   
  5.       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">         </script>  
  6.   
  7.       <div>  
  8.   
  9.          <label for="searchTextBox">Search: </label>  
  10.   
  11.          <input id="TextBox" type="text" />  
  12.   
  13.          <input id="Button" type="button" value="Search" />  
  14.   
  15.       </div>  
  16.   
  17.       <div id="resultsDiv"></div>  
  18.   
  19.          <script type="text/javascript">  
  20.   
  21.                var context = SP.ClientContext.get_current();  
  22.   
  23.                $(document).ready(function () {  
  24.   
  25.                   var spAppWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));  
  26.   
  27.                   $("#Button").click(function () {  
  28.   
  29.                      var queryUrl = spAppWebUrl + "/_api/search/query?querytext='" + $("#TextBox").val() + "'";  
  30.   
  31.                         $.ajax({ url: queryUrl, method: "GET", headers: { "Accept":"application/json; odata=verbose" }, success: onQuerySuccess, error: onQueryError });  
  32.   
  33.                   });  
  34.   
  35.                });  
  36.   
  37.                function onQuerySuccess(data) {  
  38.   
  39.                   var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;  
  40.   
  41.                   $("#resultsDiv").append('<table>');  
  42.   
  43.                   $.each(results, function () {  
  44.   
  45.                      $("#resultsDiv").append('<tr>');  
  46.   
  47.                      $.each(this.Cells.results, function () {  
  48.   
  49.                         $("#resultsDiv").append('<td>' + this.Value + '</td>');  
  50.   
  51.                      });  
  52.   
  53.                      $("#resultsDiv").append('</tr>');  
  54.   
  55.                   });  
  56.   
  57.                   $("#resultsDiv").append('</table>');  
  58.   
  59.                }  
  60.   
  61.                function onQueryError(error) {  
  62.   
  63.                   $("#resultsDiv").append(error.statusText)  
  64.   
  65.                }  
  66.   
  67.                //function to get a parameter value by a specific key  
  68.   
  69.                function getQueryStringParameter(urlParameterKey) {  
  70.   
  71.                   var params = document.URL.split('?')[1].split('&');  
  72.   
  73.                   var strParams = '';  
  74.   
  75.                   for (var i = 0; i < params.length; i = i + 1) {  
  76.   
  77.                      var singleParam = params[i].split('=');  
  78.   
  79.                      if (singleParam[0] == urlParameterKey)  
  80.   
  81.                      return decodeURIComponent(singleParam[1]);  
  82.   
  83.                   }  
  84.   
  85.                }  
  86.   
  87.       </html>  
  88.   
  89. </head>