Filter Items By First Letter

alphabet

Copy the following JavaScript into notepad and save it as a .txt file.

</pre>
<script type="text/javascript">
         function qs(paramName) {
                 var args = document.location.search.substring(1).split("&");
                 for(j = 0; j < args.length; j++) {
                         nameValues = args[j].split("=");
                         if(nameValues[0] == paramName) return nameValues[1];
                 }
                 return null;
         }

var filterField = "FL";
 var filterValuesDelimiter = " | ";

var filterValues = new Array
 ("0-9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

var selectedValueStyle = "font-weight: bold;";

var filterDivStyle = "margin: 5px; font-size: 15px;";
         var filterLinks = new Array();
         for (var i = 0; i < filterValues.length; i++) {
                 filterLinks.push('<a ' + (qs("FilterValue1") == filterValues[i] ? 'style="' + selectedValueStyle + ' ' : '') + 'href="' + document.location.href.split("?FilterField1")[0] + '?FilterField1=' +
 filterField + '&FilterValue1=' + filterValues[i] + '">' + filterValues[i] + '</a>');
         }
         document.write('


<div style="' + filterDivStyle + '">' + filterLinks.join
 (filterValuesDelimiter) + ' | ' + '<a ' + (qs("FilterValue1") == filterValues[i] ? 'style="' + selectedValueStyle + ' ' : '') + 'href="' + document.location.href.split("?FilterField1")[0] + '">' + 'All</a>' + '</div>


');
 </script>

Upload this text doc to the Site Assets library.

Create a calculated column on the library you want to filter and name it “FL”. Add this to the Formula field:

=IF(ISNUMBER(INT(LEFT(Title,1))),"0-9",LEFT(Title,1))

calculated

Add a Content Editor web part to the page and open up the settings. In the Content Link field, paste the URL for the text file you uploaded earlier.

content

Click Apply to confirm that the filter shows up correctly on the page. Also make sure you change the Chrome Type under Appearance to “None”.

alphabetfl

Save the page and test the filter.

dfilter

tfilter

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s