JSOM Keyword Query Search In SharePoint

We can use JSOM for keyword query search in SharePoint 2013. I’ll explain the basics of this using CEWP and jQuery.

Prerequisites: Search should be configured and working in the system.

Solution

• Create a web part page in your SharePoint 2013 or Office 365 SharePoint Site.
• Add Content Editor web part on the page.

Figure 1: JSOM Search

• Open any text editor/visual studio and write JS file ‘Search_JSOM.js’, code is shown here:
  

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.runtime.debug.js”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.js”></script>
<script type=”text/javascript” src=”/_layouts/15/SP.RequestExecutor.js”></script>
<script type=”text/javascript” src=”/_layouts/15/SP.search.js”></script>
<style>
table.sresult, th.sresult , td.sresult {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table.sresult tr:nth-child(odd) {
background-color: #f1f1f1;
}
table.sresult tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script type=”text/javascript”>
$(function ()
{
var results;
$(“#btnSearch”).click(executeSearch);
$(“#btnSearch”).button();
});

//SERCH FUNCTION
function executeSearch(event)
{
    var appweburl = _spPageContextInfo.siteAbsoluteUrl;
    var clientContext = new SP.ClientContext(appweburl);
    var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(clientContext);
    keywordQuery.set_queryText($(“#searchTextBox”).val());
    var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(clientContext);
    results = searchExecutor.executeQuery(keywordQuery);
    clientContext.executeQueryAsync(onQuerySuccess, onQueryFailed);
}
function onQuerySuccess(sender, args)
{
    $(“#result_box”).empty();
    var table = $(“
    <table class=’sresult’>”, { ID: “resultsTable” });
            table.append($(“
        <thead>”)
.append($(“
            <td>”).text(“Title”))
.append($(“
                <td>”).text(“Path”))
.append($(“
                    <td>”).text(“Owner”))
.append($(“
                        <td>”).text(“Modified”)));
$.each(results.m_value.ResultTables[0].ResultRows, function ()
{
table.append($(“
                            <tr>”)
.append($(“
                                <td>”).append(this.Title))
.append($(“
                                    <td>”).append(this.Path))
.append($(“
                                        <td>”).append(this.Author))
.append($(“
                                            <td>”).append(this.Write)));
});
$(“#result_box”).append(table);
}

function onQueryFailed(sender, args) {
$(“#result_box”).empty();
$(“#result_box”).text(“Error: ” + ‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

                                            </script>
                                            <div>
                                                <label for=”searchTextBox”>Search: </label>
                                                <input id=”searchTextBox” type=’text’ style=”width: 200px”></input>
                                                <input id=”btnSearch” type=’button’ style=”width: 100px” value=”Search”></input>
                                                <br/>
                                                <div id=”result_box”></div>
                                            </div>

JS explained

JS starts with required script references (jQuery, sp.js, sp.search.js etc.) and style for search results table. Followed by javascript function ‘executeSearch’ to get client context, read ‘keyword’ and then execute search query on keyword. ‘onQuerySuccess’ function will handle success case and create a table with search results that will be displayed on the page. ‘onQueryFailed’ will display error message if ‘executeQueryAsync’ fails. Finally a text box to provide ‘keyword’, button to search and div for search results are added as html.

Now upload this ‘Search_JSOM.js’ to site assets or any other library of SharePoint site.

Edit Content Editor Web part on page and provide URL of ‘Search_JSOM.js’ file as Content Link. Save the page, it will look like the following:

 

Figure 2: Content Editor

Enter a valid text that exists in SharePoint and already crawled, and click on search button; relevant results will be displayed as a table.

 

Figure 3: Valid Text