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



Figure 1: JSOM Search
  1. <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
  2. <script type=”text/javascript” src=”/_layouts/15/sp.runtime.debug.js”></script>
  3. <script type=”text/javascript” src=”/_layouts/15/sp.js”></script>
  4. <script type=”text/javascript” src=”/_layouts/15/SP.RequestExecutor.js”></script>
  5. <script type=”text/javascript” src=”/_layouts/15/SP.search.js”></script>
  6. <style>
  7. table.sresult, th.sresult , td.sresult {
  8. border: 1px solid grey;
  9. border-collapse: collapse;
  10. padding: 5px;
  11. }
  12. table.sresult tr:nth-child(odd) {
  13. background-color: #f1f1f1;
  14. }
  15. table.sresult tr:nth-child(even) {
  16. background-color: #ffffff;
  17. }
  18. </style>
  19. <script type=”text/javascript”>
  20. $(function ()
  21. {
  22. var results;
  23. $(“#btnSearch”).click(executeSearch);
  24. $(“#btnSearch”).button();
  25. });
  27. //SERCH FUNCTION
  28. function executeSearch(event)
  29. {
  30. var appweburl = _spPageContextInfo.siteAbsoluteUrl;
  31. var clientContext = new SP.ClientContext(appweburl);
  32. var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(clientContext);
  33. keywordQuery.set_queryText($(“#searchTextBox”).val());
  34. var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(clientContext);
  35. results = searchExecutor.executeQuery(keywordQuery);
  36. clientContext.executeQueryAsync(onQuerySuccess, onQueryFailed);
  37. }
  38. function onQuerySuccess(sender, args)
  39. {
  40. $(“#result_box”).empty();
  41. var table = $(“
  42. <table class=’sresult’>”, { ID: “resultsTable” });
  43. table.append($(“
  44. <thead>”)
  45. .append($(“
  46. <td>”).text(“Title”))
  47. .append($(“
  48. <td>”).text(“Path”))
  49. .append($(“
  50. <td>”).text(“Owner”))
  51. .append($(“
  52. <td>”).text(“Modified”)));
  53. $.each(results.m_value.ResultTables[0].ResultRows, function ()
  54. {
  55. table.append($(“
  56. <tr>”)
  57. .append($(“
  58. <td>”).append(this.Title))
  59. .append($(“
  60. <td>”).append(this.Path))
  61. .append($(“
  62. <td>”).append(this.Author))
  63. .append($(“
  64. <td>”).append(this.Write)));
  65. });
  66. $(“#result_box”).append(table);
  67. }
  69. function onQueryFailed(sender, args) {
  70. $(“#result_box”).empty();
  71. $(“#result_box”).text(“Error: ” + ‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  72. }
  74. </script>
  75. <div>
  76. <label for=”searchTextBox”>Search: </label>
  77. <input id=”searchTextBox” type=’text’ style=”width: 200px”></input>
  78. <input id=”btnSearch” type=’button’ style=”width: 100px” value=”Search”></input>
  79. <br/>
  80. <div id=”result_box”></div>
  81. </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