Search SharePoint list or library using Jquery
Step 1)
Download these two files from the below link
Click here to
download jquery.min.js
Click here to
download jsapi.js
Step 2)
Upload these two files in your SharePoint site’s document
library.
Step 3)
Now go to the list or library where search functionality
needs to be added.
And Click Site settings > Edit Page
In the SP ribbon click on Insert > web Part
In the categories of webpart select Media and content
In webparts select Content Editor webpart and Click Add
finally.
Step 4)
Click on the Content Editor webpart and in the ribbon its
properties are added.
Under format Text > Click HTML and click Edit HTML Source,
a modal box opens up.
Step 5)
Add the following code in the HTML source modal box and
click OK.
<script
src="YOUR SITE LINK TO jsapi.js"></script>
<script>
google.load("jquery",
"1.2.6");
google.setOnLoadCallback(function()
{
$(document).ready(function()
{
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase:
"(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
});
$("table.ms-listviewtable
tr.ms-viewheadertr").each(function()
{
if($("td.ms-vh-group",
this).size() > 0)
{
return;
}
var tdset = "";
var colIndex = 0;
$(this).children("th,td").each(function()
{
if($(this).hasClass("ms-vh-icon"))
{
//
attachment
tdset
+= "<td></td>";
}
else
{
//
filterable
tdset
+= "<td><input type='text' class='vossers-filterfield'
filtercolindex='" + colIndex + "' /></td>";
}
colIndex++;
});
var tr = "<tr
class='vossers-filterrow'>" + tdset + "</tr>";
$(tr).insertAfter(this);
});
$("input.vossers-filterfield")
.css("border", "1px
solid #7f9db9")
.css("width",
"100%")
.css("margin",
"2px")
.css("padding",
"2px")
.keyup(function()
{
var inputClosure =
this;
if(window.VossersFilterTimeoutHandle)
{
clearTimeout(window.VossersFilterTimeoutHandle);
}
window.VossersFilterTimeoutHandle
= setTimeout(function()
{
var
filterValues = new Array();
$("input.vossers-filterfield",
$(inputClosure).parents("tr:first")).each(function()
{
if($(this).val()
!= "")
{
filterValues[$(this).attr("filtercolindex")]
= $(this).val();
}
});
$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
{
var
mismatch = false;
$(this).children("td").each(function(colIndex)
{
if(mismatch)
return;
if(filterValues[colIndex])
{
var
val = filterValues[colIndex];
//
replace double quote character with 2 instances of itself
val
= val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));
if($(this).is(":not(:containsIgnoreCase('"
+ val + "'))"))
{
mismatch
= true;
}
}
});
if(mismatch)
{
$(this).hide();
}
else
{
$(this).show();
}
});
}, 250);
});
});
});
</script>
<script
src="YOUR SITE LINK TO jquery.min.js"
type="text/javascript"></script>
Step 6)
Replace YOUR SITE LINK TO with the link of
the files uploaded in your document library.
Step 7)
Now a text box will be present over
every column in the list, where you can search.
Nice write up. This code currently returns result from only the current view page (with 30 items listed). It does not return results from the rest of the list. Can this be achieved?
ReplyDeleteHi,
ReplyDeleteI dont know how to do for searching entire list, if its in the next page ( I mean after 30 items). But as a turnaround u can increase the item limit so that u search the entire list.