Subscribe to News feed

Add real-time filtering to all lists and libraries in a SharePoint Site Collection

Posted at: 9:13 AM on 24 September 2009 by Muhimbi

InfuserBoxWe 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.

 InlineListFilter


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:

  1. Download and install Muhimbi’s free SharePoint Infuser on one of your Web Front End Servers.
     
  2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
       
  3. In your SharePoint Site collection, on the Site Actions / Site Settings screen, select Infuse custom content from the Look and Feel column.
     
  4. 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.
     
  5. 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>

Labels: , ,

1 Comments:

  • On our forums (http://www.muhimbi.com/support/forum.aspx?ForumID=5) we received the following question:

    "In general we love the real-time text filter, but have had instances where we prefer to not have it run on a particular page.
    Can you provide code we could drop in (using a CEWP) on a per-page basis to disable this functionality?"

    The best way to achieve this is add some logic to the script to check which page you are on. At the beginning of the script add the following directly after the line that says $(document).ready(function() {:

    if(location.pathname == '/sites/[somesite]/DocLib2/Forms/AllItems.aspx')
    return;

    By Blogger Jeroen Ritmeijer, At 02 October, 2009 17:50  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

Need support from experts?

Access our Forum

Download Free Trials