SharePoint 2013: How to search using REST services part 2

We learned about basics of search responses and refiners. Now we will see how to implement a basic search component with the help of Search REST services. This is simple to implement all you need to know is how to construct REST URL and how to use their response.

The REST URL for Search is : /_api/search/query?querytext=’text’

Following is the complete code which searches on the text provided in the textbox and shows on the screen.

HTML Code:

<script type="text/javascript" src="/Site%20Assets/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="/Site%20Assets/js/knockout.3.2.0.js"></script>

<script type="text/javascript" src="/Site%20Assets/js/SimpleSearch.js"></script>

<div class="row">

<div class="col-xs-12 col-sm-8 col-md-8">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6">

<input type="text" class="form-control" placeholder="Search" id="txtSearch">

</div>

<div class="col-xs-12 col-sm-6 col-md-6">

<button type="button" class="btn btn-default" data-bind="click: btnSearchClick">Search</button>

</div>

</div>

<div class="row">

<div style="width:100%;padding-left:10px;" data-bind="foreach: SearchResults">

<div class="row">

  <div class="col-xs-12 col-sm-12 col-md-12" style="border-bottom: 1px solid;padding-bottom:10px;">

<div style="width:100%">

<a href="" data-bind="attr: { href: Url }"><h4><span data-bind="text: Title"> </span></h4></a>

</div>

<div style="width:100%">

<p data-bind="html: HitHighlightedSummary"> </p>

</div>

<div style="width:100%">

<a href="" data-bind="attr: { href: Path }"><span data-bind="text: Path"> </span></a>

</div>

<div style="width:100%">

<span class="label label-default"> Author: <span data-bind="text: Author"> </span> </span>

</div>

  </div>

</div>

</div>

</div>

</div>

</div>

JS code:

var RESTURL = "/_api/search/query?querytext=";

$(document).ready(function () {

    KOViewModel();

});

function KOViewModel()

{

 var self = this;

 self.SearchResults = ko.observableArray([]);

 self.SearchResult = function(url,title,hitHighlightedSummary,author,path)

 {

 var self = this; 

 self.Url = url;

 self.Title = title;

 self.HitHighlightedSummary = hitHighlightedSummary;

 self.Author = author;

 self.Path = path;

 }

 self.btnSearchClick = function()

 {

self.Search();

 }

 self.Search = function()

 {

 var searchtext = $("#txtSearch").val();

 self.SearchResults.removeAll();

 $.ajax({

 url: RESTURL + "'" + searchtext + "'",

 type: "GET",

 headers: {

 "accept": "application/json;odata=verbose",

 },

 success: function (data) {

 $.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function () {

  self.SearchResults.push(new self.SearchResult(this.Cells.results[6].Value,this.Cells.results[3].Value,this.Cells.results[11].Value,this.Cells.results[4].Value,this.Cells.results[6].Value));

  

 });

 },

 error: function (error) {  

 alert(JSON.stringify(error));

 }

 });

}

ko.applyBindings(self);

}

Note: Knock out framework has been used in above component. To run this code you need to refer knock out js file.