Filter On SharePoint List - When there is a Count in the View

While working on an idea of just quickly providing a filter search on a list.  I was trying to adapt this technique as passed to me from a colleague of mine

http://kongedagain.blogspot.hk/2013/10/filter-on-sharepoint-list.html

which in turn I think was adapted from the amazing SharePoint Boris site http://www.sharepointboris.net/articles/the-power-of-content-editor-webpart/3-quick-search-in-list-view/#

I was unable to get it work when the list was even grouped, aggregated with a count.

The reason was because the table structure of the HTML that SharePoint writes count is different when the list is aggregated.  There are several more <tbody> tags inside the main table "ms-listViewTable", this causes the JQuery search to fail as it cannot lock onto the correct <tbody> section.

Then came some more googling and guess what someone more amazing has come up with a solution.

http://www.bitsofsharepoint.com/ExamplePoint/Site/ListSearch.aspx

It works really well.  I have extracted the code to place into the CEWP below.

The only minor problem is after a search is done, it hides the count field box which would have been nice to show a count of all that has been filtered.  Also I know lots of people been asking if it can show items that are not on the screen, which happens when you are paging the list.  The answer is not yet, it can only filter whats been displayed on the screen.

<!-- This section covers the Configuration table. -->
<DIV id=configBox>
<TABLE class=table>
<THEAD class=thead>
<TR>
<TH class="thTop th" colSpan=2>List Filter - Configuration</TH></TR></THEAD>
<TBODY class=tbody>
<TR>
<TD class=tdOverview>Overview</TD>
<TD class=tdOverviewField>Here you can change the location of the filter box and add comments that the enduser can see.</TD></TR></TBODY></TABLE>
<TABLE class=table>
<THEAD class=thead>
<TR>
<TH class=th colSpan=2>OPTIONS</TH></TR></THEAD>
<TBODY class=tbody><!--This section outlines the options available to the enduser to change.
    The variable for the script is the derived from the value provided.
    There are 10 listed and commented out till needed.  Uncomment to use.
    Best practice is to use the Rich Text Editor to change the Option, Value
    and Help field vs editing in HTML editor.-->
<TR>
<TD class=tdOption>Option</TD>
<TD class="tdOptionField ">Filter Box Location</TD></TR>
<TR>
<TD class=tdValue>Value</TD>
<TD class=tdValueField id=option1>left</TD></TR>
<TR>
<TD class=tdHelp>Help</TD>
<TD class=tdHelpField>left, center, or right. You can set where the filter box is displayed by entering in either left, center or right.</TD></TR>
<TR>
<TD class=tdOption>Option</TD>
<TD class="tdOptionField ">Comments</TD></TR>
<TR>
<TD class=tdValue>Value</TD>
<TD class=tdValueField id=option2>Comments are optional.</TD></TR>
<TR>
<TD class=tdHelp>Help</TD>
<TD class=tdHelpField>You can add comments for the endusers who use this. Leave blank to have no comments show.</TD></TR><!--This section outlines the jQuery option.  This is required for the solution to work.
    This gives the user the ability to use the default external location or to define
    where the local copy of jQuery has been housed. -->
<TR>
<TD class=tdOption>Option</TD>
<TD class=tdOptionField>jQuery File</TD></TR>
<TR>
<TD class=tdValue>Value</TD>
<TD class=tdValueField id=jQueryJS>http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</TD></TR>
<TR>
<TD class=tdHelp>Help</TD>
<TD class=tdHelpField>Only change this option if you want to use a local copy of the jQuery file.</TD></TR>
<TR>
<TD class="tdBBorder line" colSpan=2>---- Change only the gray boxes on this page. ----</TD></TR></TBODY></TABLE><!-- This section covers the Do Not change area. -->
<P class=line>Please do not Edit, Change or Add any information below this line.</P>
<HR>
</DIV><!-- This section covers the Solution Info table.  Recommended to change the values
     using the Rich Text Editor. -->
<DIV id=instructions style="DISPLAY: none">
<TABLE class=tableInfo>
<TBODY>
<TR>
<TD class="tdInfoOption ms-vb" colSpan=2>Click <B>Rich Text Editor</B> to change options</TD></TR></TBODY></TABLE>
<TABLE class=tableInfo>
<THEAD>
<TR>
<TH class=thInfo colSpan=2>CEWP Solution Info</TH></TR></THEAD>
<TBODY>
<TR>
<TD class="tdInfoLabel ms-vb">Title:</TD>
<TD class="tdInfo ms-vb">List Filter</TD></TR>
<TR>
<TD class="tdInfoLabel ms-vb">Details:</TD>
<TD class="tdInfo ms-vb">This solution will filter all visible items in a list.</TD></TR>
<TR>
<TD class="tdInfoLabel ms-vb">Site Name:</TD>
<TD class="tdInfo ms-vb">BitsOfSharePoint</TD></TR>
<TR>
<TD class="tdInfoLabel ms-vb">Site URL:</TD>
<TD class="tdInfo ms-vb"><A href="http://www.bitsofsharepoint.com/ExamplePoint/Site/ListSearch.aspx" target=_blank>http://www.bitsofsharepoint.com/ExamplePoint/Site/ListSearch.aspx</A></TD></TR>
<TR>
<TD class="tdInfoLabel ms-vb">Author:</TD>
<TD class="tdInfo ms-vb">Peter Allen</TD></TR>
<TR>
<TD class="tdInfoLabel ms-vb">Version:</TD>
<TD class="tdInfo ms-vb">2.3</TD></TR></TBODY></TABLE></DIV>
<STYLE>
/* This CSS section covers the Configuration table. */
#configBox   { display:none; }
.table     { margin: 1em; border-collapse: collapse; width:95%; }
.th     { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; }
.tdOverview   { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; width: 50px; }
.tdOverviewField { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; }
.tdOption    { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; width: 50px; }
.tdOptionField   { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; font-weight: bold; }
.tdValue    { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; width: 50px; }
.tdValueField   { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; background: #DCDCDC; vertical-align:top; }
.tdHelp    { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; width: 50px; }
.tdHelpField   { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; }
.thTop     { font-size: 1.5em; }
.thead     { background: #6699CC; }
.tbody     { background: #CAE5FF; }
/* This CSS section covers the Do Not change area. */
.line     { text-align: center; font-weight: bold; }
/* This CSS section covers the Solution Info table. */
.tableInfo    { margin: 1em; border-collapse: collapse; width:500px; }
.thInfo    { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 3px #E6E6E6 solid; border-top: 3px #E6E6E6 solid; vertical-align:top; }
.tdInfo    { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; vertical-align:top; }
.tdInfoOption   { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; background-color: #E6E6E6; vertical-align:top; text-align:center; }
.tdInfoLabel   { text-align:right; font-weight:bold; width: 90px; padding : .3em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; vertical-align:top; }
</STYLE>

<!-- This section checks for jQuery being loaded and if not then loads jQuery based on the option value. 
     Script provided by Paul Grenier from endusersharepoint.com-->
<SCRIPT type=text/javascript>
if(typeof jQuery=='undefined'){
 var jQPath = document.getElementById('jQueryJS').innerHTML.replace(/(<([^>]+)>)/ig,"");
 document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</SCRIPT>
<!-- This section is where .js and .css files can be loaded from anywhere based on the above option setting. 
     The script was provided by JavaScript Kit at http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml-->
<SCRIPT type=text/javascript>
function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}
// To load a css or Javascript file from options follow the example below.
// You will need to identify the id of the option that has the URL.
// Then identify if it is a JavaScript (js) and a CSS (css) file.
//var srcURL = $('#lyteboxJS').text();
//var hrefURL = $('#lyteboxCSS').text();
//loadjscssfile(srcURL, "js") //dynamically load and add a JavaScript file
//loadjscssfile(hrefURL, "css") //dynamically load and addd a CSS file
</SCRIPT>
<SCRIPT type=text/javascript>
// This displays the Solution Info when the user is in Edit Page mode.
$(document).ready(function(){
 if ($("#edmc2").length > 0){
  $('#instructions').show();
  }
 });
</SCRIPT>
<SCRIPT type=text/javascript>
// This script section identifies the variables and the solution script
// Variables are commented out till needed.
var opt1 = $('#option1').text();
var opt2 = $('#option2').text();
// Below add your JavaScript or jQuery solution referencing the above variables.
$.extend($.expr[":"], {
 "containsNoCase": function(elem, i, match, array) {
  return (elem.textContent || elem.innerText || "").toLowerCase
  ().indexOf((match[3] || "").toLowerCase()) >= 0;
 }
});
$(document).ready(function() {
 // curser on search box
 $('#txtSearch').focus();

 $('#FilterList').css('text-align', opt1);
 var commentShow = opt2;
 if (commentShow !== '') {
  $('#filterOptionShow').show();
  $('#filterOptionShowComments').html(opt2);
 }
 else {
     $('#filterOptionShow').hide();
 }

 var its = $('img').is("img[src*='/plus.gif']");
 if (its === true) {
  $('#addOption').show();
 }

 // execute the search
 $('#ClickSearch').click(function() {
                 $('table.ms-summarystandardbody').addClass('ms-listviewtable');
  // hide all rows
  $("table.ms-listviewtable").children('tbody').children('tr').hide();
  // show the matching rows (using the containsNoCase from Rick Strahl)
  $("table.ms-listviewtable").children('tbody').children('tr:containsNoCase(\'' + $('#txtSearch').val() + '\')').show();
  // show the header row
  $('.ms-listviewtabletr:first').show();
  $(".ms-viewheadertr").show();
  $('#txtSearch').focus();
 });
 $("#clear").click(function() {
  resetSearch();
 });
 $('#txtSearch').keydown(function(e) {
  //alert(e.keyCode);
  if(e.keyCode == 13) {
   $('#ClickSearch').click();
   return false;
  }
 });
});
function resetSearch() {
 // clear the textbox
 $('#txtSearch').val('');
 // show all table rows
 $("table.ms-listviewtable").children('tbody').children('tr').show();
 // remove the cancel search image
 $('#txtSearch').focus();
}
/*
* Copyright (c) 2009 Paul Grenier (endusersharepoint.com)
* Licensed under the MIT (MIT-LICENSE.txt)
*/
$(function(){
 jQuery.groups = {
  collapse : function() {
   $("img[src*='minus.gif']:visible").parent().click();
  },
  expand : function() {
   
   $("img[src*='plus.gif']:visible").parent().click();
  }
 };
 var expandAll = "<a id='clickAll' href='#' onClick="
 +'"'+"this.href='javascript:$.groups.expand()'"
 +'">Expand All Groups</a>',
 collapseAll = "<a href='#' onClick="+'"'
 +"this.href='javascript:$.groups.collapse(),resetSearch()'"
 +'">Collapse All Groups</a>';
 $("span#optionList1").append(expandAll);
 $("span#optionList2").append(collapseAll);
});
</SCRIPT>
<STYLE>
#FilterList   { text-align:right; }
.filterHeader   { font-weight:bold; text-align:right; vertical-align:middle; }
.filterTR     { padding: 2px; }
.filterBold   { font-weight:bold; }
.filterOption  { font-size: xx-small; }
#filterOptionShow { display: none; }
#addOption   { display: none; }
</STYLE>
<DIV id=FilterList>
<TABLE id=tableFilterList style="WIDTH: 500px" cellSpacing=0 cellPadding=0>
<TBODY>
<TR class=filterTR>
<TD class="filterHeader ms-vb" valign="bottom"><NOBR>Quick Staff Name Search:</NOBR></TD>
<TD class=ms-vp><INPUT id=txtSearch maxLength=70 size=25 name=txtSearch>&nbsp;<a href="#" id=ClickSearch>Filter List</a> | <a href="#" id=clear>Clear Filter</a></TD></TR>
<TR class=filterTR id=addOption>
<TD class="filterHeader ms-vb">Option:</TD>
<TD class=ms-vp><SPAN class=filterBold id=optionList1></SPAN><SPAN class=filterOption>&nbsp;&nbsp;(Click to Filter All Grouped Items)</SPAN><BR><BR><SPAN class=filterBold id=optionList2></SPAN><SPAN class=filterOption>&nbsp;&nbsp; (Click to Reset and Collapse List)</SPAN></TD></TR>
<TR class=filterTR id=filterOptionShow>
</TR></TBODY></TABLE></DIV>