Add real-time filtering to all lists and libraries in a SharePoint Site Collection
Clavin Fernandes
We love it when third parties start writing code and examples for our products, it makes writing new blog entries very simple and quick. Today we got another cool Infuser script from Jaap Vossers who previously brought us the script that allows Site Settings to be opened using a keyboard shortcut.
Today’s script is a JavaScript based solution that adds filter-as-you-type textboxes to every column of a SharePoint list or document library. It uses jQuery to add the textboxes and perform the filtering.
As an added bonus it adds filtering to field types that normally aren’t filterable, like calculated and note columns.
Jaap has made the code available on CodePlex, but it is probably easier to just paste the code listed below directly into Infuser.
Follow the steps outlined below to add this cool script to your site collection:
-
Download and install Muhimbi’s free SharePoint Infuser on one of your Web Front End Servers.
-
Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
-
In your SharePoint Site collection, on the Site Actions / Site Settings screen, select Infuse custom content from the Look and Feel column.
-
Paste the code displayed below into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
-
Click the Save button, navigate to any list and start filtering.
<script src="/_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>
<script>
// SharePoint InstantListFilter - developed by Jaap Vossers
$(document).ready(function()
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: function(a,i,m) {return (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>
Clavin is a Microsoft Business Applications MVP who supports 1,000+ high-level enterprise customers with challenges related to PDF conversion in combination with SharePoint on-premises Office 365, Azure, Nintex, K2, and Power Platform mostly no-code solutions.
