Create custom list search in SharePoint Online

There are many different occasions when you may be required to setup some custom search features on a list or library, this could be searching for any type of field on any number of fields. However in this scenario we will be looking at creating a search page where we can specifically search three fields, these are First Name, Surname, E-mail Address.

This feature will make sure that at least 2 characters have been entered into one of the fields before searching the list, it will also perform different search queries depending on which fields have been filled in. For example if the First Name and e-mail address are filled in then it will search for records only where the First Name matches and has the same E-Mail address.

The following snippets can be used to create a customer search interface to search a list for specific information, this is very useful when the default list views are locked down and users don’t have an easy was of searching for items

In this scenario you will need to setup a list with the following fields:

Field Name Data type
First Name Single line of text
Surname Single line of text
Email Address Single line of text
Is record Active Boolean (yes/No)
Ref No Single line of text
Fill in the list with some test data

Add a script editor to the page and insert the following code – this will create our search fields and search button at the top of the page

Note: the code below is using bootstrap to organise the content into responsive content

[html]

<div class="row frm-plan col-md-12 col-sm-12" id="findUser">
<div class="form-group col-md-2"></div>
<div class="form-group col-md-8">
<div class="col-md-2">
Forname: <input type="text" name="FirstnameSrch" id="FirstFld" style="width: 90% !important;">
</div>
<div class="col-md-2">
Surname: <input type="text" name="SurnameSrch" id="SurnameFld" style="width: 90% !important;">
</div>
<div class="col-md-5">
E-mail Address: <input type="text" name="AddressSrch" id="AddressFld" style="width: 90% !important;">
</div>
<div class="col-md-2">
<div class="subBtn">
<a onclick="getRecords()" href="javascript:void(0)">
<button id="FindBtn" type="button">Find User</button>
</a>
</div>
</div>
</div>
<div class="form-group col-md-2">
</div>
</div>

[/html]

Create a new blank webpage and add a content editor or script webpart and add in the following code – this will create the results area on the page where we can display all of the returned results

[html]

<div id="userList">
<div class="userBg">
<div class="userList">
<div class="userItem">
<div class="refNo heading">Ref No </div>
<div class="userFname heading">Firstname </div>
<div class="userSname heading">Surname </div>
<div class="userAddress heading">E-mail Address </div>
<div class="isActive heading">Case Open?</div>
<div class="recordLink heading">Link</div>
</div>
<div class="userItem">
<div class="refNo">None</div>
<div class="userFname">None</div>
<div class="userSname">None</div>
<div class="userAddress">None</div>
<div class="isActive heading">None</div>
<div class="recordLink">None</div>
</div>
</div>
</div>
</div>

[/html]

Now create two files somewhere in your tenancy or within a CDN if desired, name the first one findRecords.css and the second one findRecords.js

In the first file findRecords.css copy and paste the following CSS

[css]
.userList .userItem:nth-child(odd) {
background-color: #fff
}

.userList .userItem:nth-child(even) {
background-color: rgba(132,152,218,.22)
}

.userHeading,.userList .userItem:nth-child(1) {
background-color: rgba(54,80,169,.87);
color: #fdfdfd;
font-weight: 700;
font-size: 16px;
border-radius: 20px 20px 0 0;
padding: 14px 0 10px 4px
}

#FindBtn,.userList {
border-radius: 10px
}

.userList {
background-color: #fff;
width: 99%;
z-index: 100;
padding: 30px 20px
}

.userHeading {
font-family: "Segoe UI Semilight","Segoe UI",Segoe,Tahoma,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
text-align: center;
padding: 14px 0 20px
}

.isActive,.recordLink,.refNo,.userAddress,.userFname,.userSname {
display: inline-block;
width: 7%;
padding: 10px;
text-align: left;
vertical-align: top
}

.caseCreated {
width: 8%
}

.refNo {
width: 5%
}

.userAddress {
width: 24%
}

#FindBtn {
height: 32px;
margin-top: 20px
}

#AddressFld,#FirstFld,#SurnameFld {
border-radius: 10px;
height: 43px;
font-size: 20px
}

.backBtn .icon {
font-size: 20px!important;
padding: 6px 10px;
background-color: rgba(54,63,169,.88)!important;
border-radius: 14px;
bottom: 20px;
color: #fff
}

.headerArea.headTitle {
font-size: 20px;
padding: 0 0 30px
}
[/css]

In the second file findRecords.js copy and paste the following JavaScript

[javascript]
$(document).ready(function () {
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’);
if (!(‘remove’ in Element.prototype)) {
Element.prototype.remove = function () {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
});

function getRecords() {
var SiteURL = window.location.protocol + "//" + window.location.host + _spPageContextInfo.webServerRelativeUrl;
var Forename = $("#FirstFld")[0].value;
var Surname = $("#SurnameFld")[0].value;
var Address = $("#AddressFld")[0].value;

if (Forename.length < 2) {
Forename = ""
};
if (Surname.length < 2) {
Surname = ""
};
if (Address.length < 2) {
Address = ""
};
if (!(Forename) && !(Surname) && !(Address)) {
alert("You have not entered enough information in the fields, please enter at least 2 characters")
} else {
var clientContext = new SP.ClientContext(SiteURL);
var oList = clientContext.get_web().get_lists().getByTitle(‘Search Cases’);
var camlQuery = new SP.CamlQuery();
if (!(Forename) && !(Surname) && (Address)) {
//Search for e-mail only
camlQuery.set_viewXml(ViewXml = "<View><Query><Where><And><Contains><FieldRef Name=’Address’ /><Value Type=’Text’>" + Address +
"</Value></Contains><Neq><FieldRef Name=’Feedback_x0020_Type’ /><Value Type=’Text’>Compliment</Value></Neq></And></Where></Query></View>");
} else {
//Search for address and first or surname
if (((Forename) || (Surname)) && (Address)) {
camlQuery.set_viewXml(ViewXml = "<View><Query><Where><And><And><Or><Contains><FieldRef Name=’First_x0020_Name’ /><Value Type=’Text’>" +
Forename + "</Value></Contains><Contains><FieldRef Name=’Surname’ /><Value Type=’Text’>" + Surname +
"</Value></Contains></Or><Contains><FieldRef Name=’Address’ /><Value Type=’Text’>" + Address +
"</Value></Contains></And><Neq><FieldRef Name=’Feedback_x0020_Type’ /><Value Type=’Text’>Compliment</Value></Neq></And></Where></Query></View>");
} else {
if (!((Forename) && (Surname)) && ((Forename) || (Surname))) {
//Search for either forename or surname
camlQuery.set_viewXml(ViewXml = "<View><Query><Where><And><Or><Or><Contains><FieldRef Name=’First_x0020_Name’ /><Value Type=’Text’>" +
Forename + "</Value></Contains><Contains><FieldRef Name=’Surname’ /><Value Type=’Text’>" + Surname +
"</Value></Contains></Or><Contains><FieldRef Name=’Address’ /><Value Type=’Text’>" + Address +
"</Value></Contains></Or><Neq><FieldRef Name=’Feedback_x0020_Type’ /><Value Type=’Text’>Compliment</Value></Neq></And></Where></Query></View>");
} else {
if ((Forename) && (Surname)) {
//Search for both forename and surname together
camlQuery.set_viewXml(ViewXml = "<View><Query><Where><And><Or><And><Contains><FieldRef Name=’First_x0020_Name’ /><Value Type=’Text’>" +
Forename + "</Value></Contains><Contains><FieldRef Name=’Surname’ /><Value Type=’Text’>" + Surname +
"</Value></Contains></And><Contains><FieldRef Name=’Address’ /><Value Type=’Text’>" + Address +
"</Value></Contains></Or><Neq><FieldRef Name=’Feedback_x0020_Type’ /><Value Type=’Text’>Compliment</Value></Neq></And></Where></Query></View>");
}
}
}
}
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onFindCasesQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}
// Set enter key to submit the search query
document.querySelector("#findUser").addEventListener("keyup", enterPressed);
function enterPressed(k) {
if (k.key==’Enter’)
getRecords();
return false
}
[/javascript]

Add the a script editor to the page and add the following lines of text – make sure you change the “tenant” and actual web address text to match the correct details of your environment and the location where the above two files have actually been saved.

[javascript]

[/javascript]