SharePoint search with jQuery

The data in Sharepoint can be searched using Search.asmx web service. This code just needs a CEWP to search the data using jQuery.

Add a Content Editor Web Part to your page.
Add the below code to your Content Editor Web Part
Enter any keyword to search the data

Please make sure that the data in SharePoint is crawled to search the content.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// *** Customizable parameters ***
var quickSearchConfig = {
delay: 500, // time to wait before executing the query (in ms)
minCharacters: 3, // minimum nr of characters to enter before search
scope: "All Sites", // search scope to use
numberOfResults: 75, // number of results to show
resultsAnimation: 200, // animation time (in ms) of the search results
resultAnimation: 0 // animation time (in ms) of individual result (when selected)
};
</script>
<style type="text/css">

#details {
    BORDER-BOTTOM: #f88017 1px solid; POSITION: absolute; BORDER-LEFT: #f88017 1px solid; WIDTH: 600px; DISPLAY: none; BACKGROUND: #ffffff; MARGIN-LEFT: 60px; BORDER-TOP: #f88017 1px solid; MARGIN-RIGHT: auto; BORDER-RIGHT: #f88017 1px solid;
}
.quickSearchResultDivUnselected {
    TEXT-OVERFLOW: ellipsis; BACKGROUND: white; OVERFLOW: hidden;
}
.quickSearchResultDivSelected {
    TEXT-OVERFLOW: ellipsis; BACKGROUND: white; OVERFLOW: hidden;
}
</style>
<table class="ms-sbtable ms-sbtable-ex" id="quickSearchTable" border="0"><tbody><tr class="ms-sbrow"><td class="ms-sbcell"><input title="Enter search words" class="ms-sbplain" id="quickSearchTextBox" maxlength="200" alt="Enter search words" style="width: 100%"/> </td>
<td class="ms-sbgo ms-sbcell" style="width: 14px"><img title="Go Search" alt="Go Search" src="/_layouts/images/gosearch.gif" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px"/> </td>
<td style="width: 1px"></td></tr></tbody></table>
<div id="quickSearchResults" style="display: none"></div>
<script type="text/javascript">

var quickSearchTimer;
var quickSearchSelectedDivIndex = -1;

function showResultsDiv(text) {
var div = $("#quickSearchResults");
var prevTable = div.prev();

var divCss = {
"left": 50,
"top": 150,
"border": "1px solid #7f9db9",
"padding": 2,
"position": "absolute",
"background": "white",
};

div.css(divCss).append(text).slideDown(quickSearchConfig.resultsAnimation);
}

$(document).ready(function() {
$('#quickSearchTextBox').keyup(function(event) {
var previousSelected = quickSearchSelectedDivIndex;

// catch some keys
switch(event.keyCode) {
case 13: // enter
var selectedDiv = $("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ") a");
if(selectedDiv.length == 1)
window.location = selectedDiv.attr("href");
break;
case 38: // key up
quickSearchSelectedDivIndex--;
break;
case 40: // key down
quickSearchSelectedDivIndex ++;
break;
}

// check bounds
if(quickSearchSelectedDivIndex != previousSelected) {
if(quickSearchSelectedDivIndex < 0)
quickSearchSelectedDivIndex = 0;
if(quickSearchSelectedDivIndex >= $("#quickSearchResults>div").length -1)
quickSearchSelectedDivIndex = $("#quickSearchResults>div").length - 2;
}

// select new div, unselect the previous selected
if(quickSearchSelectedDivIndex > -1) {
if(quickSearchSelectedDivIndex != previousSelected) {
unSelectDiv( $("#quickSearchResults>div:eq(" + previousSelected + ")"));
selectDiv($("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ")"));
}
}

// if the query is different from the previous one, search again
if($('#quickSearchTextBox').data("query") != $('#quickSearchTextBox').val()) {
if (quickSearchTimer != null) // cancel the delayed event
clearTimeout(quickSearchTimer);
quickSearchTimer = setTimeout(function() { // delay the searching
$("#quickSearchResults").fadeOut(200, initSearch);
} , quickSearchConfig.delay);
}
});
});

function unSelectDiv(div) {
// first stop all animations still in progress
$("#quickSearchResults>div>div").stop(true,true);

div.removeClass("quickSearchResultDivSelected").addClass("quickSearchResultDivUnselected");
$("#details", div).hide();
}

function selectDiv(div) {
div.addClass("quickSearchResultDivSelected");
$("#details", div).slideDown(quickSearchConfig.resultAnimation);
}

function initSearch() {
// first store query in data
$('#quickSearchTextBox').data("query", $('#quickSearchTextBox').val());

// clear the results
$("#quickSearchResults").empty();

// start the search
var query = $("#quickSearchTextBox").val();
if(query.length >= quickSearchConfig.minCharacters) {
showResultsDiv("Searching ..."); // display status
search(query);
}
}

function search(query) {
quickSearchSelectedDivIndex = -1;
var queryXML =
"<QueryPacket xmlns='urn:Microsoft.Search.Query' Revision='1000'> \
<Query domain='QDomain'> \
<SupportedFormats><Format>urn:Microsoft.Search.Response.Document.Document</Format></SupportedFormats> \
<Context> \
<QueryText language='en-US' type='MSSQLFT'>SELECT Title, Path, Description, Write, Rank, Size, Url, HitHighlightedSummary, PictureThumbnailURL FROM SCOPE() WHERE FREETEXT('" + query + "')</QueryText> \
</Context> \
<SortByProperties><SortByProperty name='Rank' direction='Descending' order='1'/></SortByProperties> \
<Range><StartAt>1</StartAt><Count>" + quickSearchConfig.numberOfResults + "</Count></Range> \
<EnableStemming>false</EnableStemming> \
<TrimDuplicates>true</TrimDuplicates> \
<IgnoreAllNoiseQuery>true</IgnoreAllNoiseQuery> \
<ImplicitAndBehavior>true</ImplicitAndBehavior> \
<IncludeRelevanceResults>true</IncludeRelevanceResults> \
<IncludeSpecialTermResults>true</IncludeSpecialTermResults> \
<IncludeHighConfidenceResults>true</IncludeHighConfidenceResults> \
</Query></QueryPacket>";

var soapEnv =
"<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body> \
<Query xmlns='urn:Microsoft.Search'> \
<queryXml>" + escapeHTML(queryXML) + "</queryXml> \
</Query> \
</soap:Body> \
</soap:Envelope>";

$.ajax({
url: "/_vti_bin/search.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});

function processResult(xData, status) {
var html = "<table style='width:50%; border:1px solid black;border-collapse:collapse;' id='quickSearchResultTableUnselected' class='quickSearchResultDivUnselected' CELLPADDING=5><tr><th style='border:1px solid black'>Name</th><th style='border:1px solid black'>Date Created</th><tr>";
$(xData.responseXML).find("QueryResult").each(function() {
var divWidh = $("#quickSearchTable").width() - 13;
var x = $("<xml>" + $(this).text() + "</xml>");
x.find("Document").each(function() {
var url = $("Action>LinkUrl", $(this)).text();
var title;
var description;
var summary;
var write;
 $(this).find("Property").each(function() {
  if ($("Name", $(this)).text() == "TITLE") {
     title = $("Value", $(this)).text();
    }
if ($("Name", $(this)).text() == "Description") {
     description = $("Value", $(this)).text();
    }
if ($("Name", $(this)).text() == "HITHIGHLIGHTEDSUMMARY") {
     summary = $("Value", $(this)).text();
    }
if ($("Name", $(this)).text() == "WRITE") {
     write = $("Value", $(this)).text();
    }
  
});
html +=
"<tr><td style='border:1px solid black' nowrap><a href='" + url + "' target='_blank'>" + title + "</a>\
<div id='details'>"
+ summary +
"<br/><br/><div style='color:green'>" + url + "</div> \
</div></td> \
<td style='border:1px solid black' nowrap><div style='float:left'>" + write + "</div></td></tr> \
";

});
html += "</table>"
if(x.find("TotalAvailable").text() != "")
html += "<div style='text-align:right'>Total results: " + x.find("TotalAvailable").text() + "</div>";
else
html += "<div style='text-align:right'>Total results: 0</div>";
});

$("#quickSearchResults").empty().append(html);
$("#quickSearchResultTableUnselected>tbody>tr>td>a").hover(
function() { selectDiv($(this).parent()); },
function() { unSelectDiv($(this).parent()); }
);
showResultsDiv();
}
}

function escapeHTML (str) {
return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}</script>

Comments

Post a Comment

Popular posts from this blog

Create and Deploy custom copilot to SharePoint Site (Part 2)

Image
  Custom Copilot as a canvas control on SharePoint site: This post is an extension to Part 1 to deploy the custom Copilot to SharePoint site. Before proceeding further please refer to the Part 1 as we are leveraging the custom Copilot and Service Principal created in the previous post. Deploying custom Copilot requires an additional app registration(this is different than the one created in the Part 1 for enabling authentication) to register SharePoint site as a canvas app to host copilot and handle single sign on flow. Create App Registration for SharePoint App: Login to https://portal.azure.com -> Microsoft Entra ID -> Create New App Registration Select 'Single page application' for platform and the SharePoint URL where the copilot is to be hosted and accessed Select API permissions blade and add custom API permission which was created in part 1 Save the Application(client Id) and the tenant id these will be used in SharePoint canvas app Deploy SharePoint SPFx App on ...
Read more

Create and Deploy custom copilot to MS Teams and SharePoint Site (Part 1)

Image
Custom Copilot using Copilot Studio published to MS Teams: In this two part series we see how to create a custom copilot using Microsoft Copilot Studio for Generative Answers based on the SharePoint Knowledge DB(files uploaded to SharePoint) and deploy the copilot to MS Teams and a SharePoint site. Deploying custom copilot to MS Teams and SharePoint require an authentication enabled. Lets create an Azure Service Principal(Client Id and Secret) required to enable Manual Authentication as deploying to SharePoint requires Manual Authentication. Create App Registration for Authentication: Login to https://portal.azure.com -> Microsoft Entra ID -> Create New App Registration    Add delegated API permissions: openid, profile, Files.Read.All, Sites.Read.All from Microsoft Graph Add a Scope from 'Expose an API' blade. This is required to publish the copilot to SharePoint site. You can ignore this step if you are publishing your copilot to MS Teams only. Crete a client secret fro...
Read more

Copilot Announcements from Microsoft Build 2024

Image
  Microsoft Announced major updates to Copilot Studio in Build 2024. In this article we will see the new Copilot features announced in Build 2024. New User Experience Redefined simplified developer experience for creating copilots using Copilot Studio.  Templates Industry specific templates to create custom copilots based on the industry specific templates. Templates will accelerate the development as we do not need to start from scratch. Some of these templates are Store Operations, Sustainability Insights, Website Q & A etc. we can also save custom copilot as template and made it available to others. Create Copilots from SharePoint - Private Preview Users can directly create custom copilots from SharePoint site by selecting documents and extend the copilot using Copilot Studio. Copilot will be available on the SharePoint site and we can directly ask any questions on the data from the data within the SharePoint site Copilot Connectors/Knowledge Sources We can now bring in...
Read more