Contact Search using SPServices

Recently I have been working with a client to develop a webpart to search all the contacts list in a site. Here are the limitations with this requirement

• This should be implemented in #Office365 environment and also compatible with any SharePoint 2010.
• Client may have many contact lists but all inheriting from contact list template

Since the webpart is implemented on Office365, Sandboxed webparts or Content Editor Webpart is the only option. I am not a big fan of Sandboxed webparts. This blog explains to how implement this using CEWP and #SPServices.

Why #SPServices: SPServices is a SOAP based open source Jquery library from Marc Anderson  which abstracts SharePoint web services and makes the life easy for the developers.

This is how the webpart is going to look finally.

Here is the code:

HTML for Search Box:

<table><tbody><tr><td align="right">First Name:</td>
<td align="left"><input id="firstname" type="text"/></td></tr>
<tr><td align="right">Mobile:</td>
<td align="left"><input id="mobile" type="text"/></td></tr>
<tr><td align="right">Address:</td>
<td align="left"><input id="address" type="text"/></td></tr></tbody></table>
<p><input id="sb" type="button" value="Search"/> </p>
<ul id="searchResults"></ul>

Generate SPQuery and pass to the function: 

Before executing this make sure references are added to Jquery and SPServices

$(document).ready(function () {
$("#sb").click(function(){
$("#searchResults").empty();
var query = "";
var key = "";

//Build Query from input
if($("#firstname").val()){
key = $("#firstname").val();
query = "<Query><Where><Or><Contains><FieldRef Name='FirstName'/><Value Type='Text'>"+ key +"</Value></Contains><Contains><FieldRef Name='Title'/><Value Type='Text'>"+ key +"</Value></Contains></Or></Where></Query>";
}
else if ($("#mobile").val()){
key = $("#mobile").val();
query = "<Query><Where><Contains><FieldRef Name='WorkPhone' /><Value Type='Text'>"+ key +"</Value></Contains></Where></Query>";
}
else if ($("#address").val()){
key = $("#address").val();
query = "<Query><Where><Contains><FieldRef Name='WorkAddress' /><Value Type='Text'>"+ key +"</Value></Contains></Where></Query>";
}

// Pass query to Function
if(query)
sendQuery(query);
else
$("#searchResults").append("Please enter atleast one value");

//If no results found
if (!$("#searchResults").html())
{
$("#searchResults").append("No Results Found");
}

});
});

Search results using SPServices:

function sendQuery(spQuery)
{
var thisSite = $().SPServices.SPGetCurrentSite();
//function to get all the lists
$().SPServices({
operation: "GetListCollection",
webURL: $(this).attr("WebFullUrl"),
async:false,
ompletefunc: function(xData, Status) {
$(xData.responseXML).find("List").each(function(){
var listTitle = $(this).attr("Title");
$().SPServices({
operation: "GetListContentTypes",
async: false,
listName: $(this).attr("Title"),
completefunc: function (xData, Status) {
//alert(xData.responseXML.xml);
$(xData.responseXML).find("ContentType").each(function() {

//Find all the lists with "Contact" type content

if($(this).attr("Name") == "Contact"){

$().SPServices({
operation: "GetListItems",
async: false,
listName: listTitle,
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='FirstName' /><FieldRef Name='LastName' /><FieldRef Name='WorkPhone' /><FieldRef Name='WorkAddress' /><FieldRef Name='EncodedAbsUrl' /></ViewFields>",
CAMLRowLimit: 5,
CAMLQuery: spQuery,
completefunc: function (xData, Status){
if(!xData.responseXML)
$("#searchResults").append("No Results found");
$(xData.responseXML).find("z\\:row").each(function(){
var resultURL = "";

//URL of the contact list item display form

resultURL = scope + "/DispForm.aspx?ID=" + $(this).attr("ows_ID");
var url = $(this).attr("ows_EncodedAbsUrl") + "";
var liHtml = "<li><a href='" + resultURL + "'>" + $(this).attr("ows_FirstName")+" " + $(this).attr("ows_Title") + "</a></li>";
$("#searchResults").append(liHtml);

});

}

});

}

});
}
});
})
}
});
}

Same piece of code block can be used in #Office365 or #SP2010 sites