We can use JSOM for Keyword query search in SharePoint 2013. I’ll explain basics of this using a CEWP and jquery.
Prerequisites: Search should be configured and working in the system.
Solution:
3. Open any text editor/visual studio and write JS file ‘Search_JSOM.js’, code is copied below:
<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>
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.
<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 java script 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.
4. Now upload this ‘Search_JSOM.js’ to site assets or any other library of SharePoint site.
5. 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:
6. Enter a valid text which exists in SharePoint and already crawled, and click on search button; relevant results will be displayed as a table.
Thank you...
JS starts with required script references (jquery, sp.js, sp.search.js etc.) and style for search results table. Followed by java script 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.
4. Now upload this ‘Search_JSOM.js’ to site assets or any other library of SharePoint site.
5. 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:
6. Enter a valid text which exists in SharePoint and already crawled, and click on search button; relevant results will be displayed as a table.
Thank you...
