ExamplePoint

 

<!-- 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>