B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Site > ListSearch  

Web Part Page Title Bar image
List and Document Library Filter

Expand/Collapse M E N U (click) : Examples ‎(21)

 Overview


There is a new Search a List solution, which will search all items, not just the ones that are visable.
 
Version 2.3 of List Filter has been released as of 10/28/2010.
 
Here is what has been improved in version 2.3:
  • Bug Fix - Cross browser functionality.  Worked only in IE, not should work in all browsers.
Version 2.2 of List Filter has been released as of 12/29/2009.
 
Here is what has been improved in version 2.2:
  • Bug Fix - For some there was a bug with were the style was located.
Version 2.1 of List Filter has been released as of 11/13/2009.
 
Here is what has been improved in version 2.1:
  • Collapse - Now you can expand and collapse all groupings at once.
Version 2.0 of List Filter has been released as of 11/11/2009.
 
Here is what has been improved in version 2.0:
  • Speed Improvements – Improved the speed to display the results by 4x for large lists.
  • Grouped Lists – Added a solution to better able grouped list filtering.
  • Add Comments –You can easily add comments to the filter box for the enduser.
  • Filter Box Position – You can now easily position the filter box to the left, center or right on the page.
  • New Options Interface – The new options interface makes it so that any of the above customizations can be done code free.
 
List Filter is a simple jQuery solution that will search one or more lists and document libraries on a page and show the results without having to refresh the page.
 
The filter only looks at the fields that are displayed on the page when searching.  Meaning that if your list has 1000 items and you are only show 200 at a time, then only the 200 showing will be filtered.  
 
When filtering it will look at each row to find the rows that contains the search parameters.  The filter will then show only the rows that match.
 
The solution can be added without a change to the code.  The code should be added to a CEWP, or I have also provided a WebPart that is ready to go.
 
I highly recommend downloading the Web Part and install that.
 
Version 2.3
Added
  • Cross browser functionality.  Worked only in IE, not should work in all browsers.  This has been fixed.
Download WebPart to add to page:  Download Version 2.3 (right click to save it locally on your computer.)
 
Version 2.2
Added
  • Bug Fix - For some there was a bug with were the style was located.  This has been fixed.
Download WebPart to add to page:  Download Version 2.2 (right click to save it locally on your computer.)
 
Version 2.1
Added
  • Collapse - ability to collapse all grouped items
Download WebPart to add to page:  Download Version 2.1 (right click to save it locally on your computer.)
 
Version 2.0
Added
  • Speed improvements
  • Group Lists filtering
  • Filter Box Positining option
  • Comments option
  • New interface to made code free changes to options
Download WebPart to add to page:  Download Version 2.0 (right click to save it locally on your computer.)
 
or
 
Copy the below code and add to a CEWP:
 
 

<!-- 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; }
.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: 400px" cellSpacing=0 cellPadding=0>
<TBODY>
<TR class=filterTR>
<TD class="filterHeader ms-vb"><NOBR>Filter List:</NOBR></TD>
<TD class=ms-vp><INPUT id=txtSearch maxLength=50 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>
<TD class="filterHeader ms-vb">Comments:</TD>
<TD class=ms-vp id=filterOptionShowComments>&nbsp;</TD></TR></TBODY></TABLE></DIV>
 
List Filter - Configuration
Overview Here you can change the location of the filter box and add comments that the enduser can see.
OPTIONS
Option Filter Box Location
Value left
Help left, center, or right. You can set where the filter box is displayed by entering in either left, center or right.
Option Comments
Value Comments are optional.
Help You can add comments for the endusers who use this. Leave blank to have no comments show.
Option jQuery File
Value http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
Help Only change this option if you want to use a local copy of the jQuery file.
---- Change only the gray boxes on this page. ----

Please do not Edit, Change or Add any information below this line.


Filter List:  Filter List | Clear Filter
Option:   (Click to Filter All Grouped Items)

   (Click to Reset and Collapse List)
Comments:  

 Examples

CommentsFilter
Expand/Collapse Rank : 1-Standard ‎(7)
Expand/Collapse Rank : 2-Advance ‎(11)
Expand/Collapse Rank : 3-Designer/3rd Party ‎(3)

 Progress Bar

0.Not StartedUse SHIFT+ENTER to open the menu (new window).
0.Not Started1-GreenGainsboro<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Gainsboro; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
10%
1.Started1-GreenADFF2F<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid ADFF2F; width:10%;'></DIV><DIV style='position:absolute; top:0px;'>10%</DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
40%
1.Started2-Yellowyellow<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid yellow; width:40%;'></DIV><DIV style='position:absolute; top:0px;'>40%</DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
75%
1.Started3-Redred<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid red; width:75%;'></DIV><DIV style='position:absolute; top:0px;'>75%</DIV></DIV>
2.On-HoldUse SHIFT+ENTER to open the menu (new window).
50%
2.On-Hold1-GreenThistle<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Thistle; width:50%;'></DIV><DIV style='position:absolute; top:0px;'>50%</DIV></DIV>
3.CompletedUse SHIFT+ENTER to open the menu (new window).
100%
3.Completed1-Greenskyblue<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid skyblue; width:100%;'></DIV><DIV style='position:absolute; top:0px;'>100%</DIV></DIV>
4.ClosedUse SHIFT+ENTER to open the menu (new window).
50%
4.Closed1-GreenBlack<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Black; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>

 Contacts

AllenJohn
AllenPeter