If you're an advanced developer or just want the TL;DR version of this, skip to the code.

One of the more common UI design patterns is to render a table of data that includes rows that include people’s names, various information about them, and so on.

Usually, there are some type of control elements that allow you to filter the data by some type of criteria. Obviously, this is especially useful with large datasets where you don’t want to page through pages of data or scroll for a significantly long length of time.

Though there are a variety of ways to filter data – especially if you want to do so through the use of different values – one way that’s most common is to filter data by a person’s name.

If the data set is really large, this is often something that’s best left to process on the server side; however, if the data set is modest, it’s really easy to filter names in jQuery.

One Way To Set This Up

Here’s an example of what I’m talking about:

Filter Names in jQuery

Above the table of data, there are anchors on which the users can click to filter the data based on the letter. For all intents an purposes, let’s say that I want to filter the data by the person’s last name.

For example, when a user clicks on ‘A’ then all people whose last name does not begin with ‘A’ will disappear. Then, when you click on the same letter, all names will appear.

Similarly, let’s say that you click on a different letter, then the current set of data will be hidden and the data matching the clicked letter will display.

Though there are a variety of ways to do this, I’m doing the following:

  • The rows need to be identified by the users last name. As such, that will be the ID of each row.
  • The letter that’s clicked needs to be identified
  • We need to hide all elements that do not start with the letter that was clicked

Easy enough, right?

Filter Names in jQuery

To make this simple, I’m only going to be showing small pieces of code to demonstrate the steps that are outlined above.

Name Each Row

When the data is rendered out to the page, it should look like this:

<table>
  <tbody>
    <tr id="ames">
      <td>Ames, Chris</td>
      <td>...</td>
    </tr>
    <tr id="erickson">
      <td>Erickson, Jared</td>
      <td>...</td>
    </tr>
    <tr id="...">
      <td>...</td>
    </tr>
  </tbody>
</table>

Again, the ID of the row is that of the person’s last name.

Identify The Clicked Anchor

Next, when the user clicks on a letter, we need to be able to identify which letter was clicked. The letters can be stored in a variety of elements – unordered lists, spans, paragraphs, and so on.

I’m a fan of using styled, unordered lists so here’s what my code looks like:

</pre>
<ul id="alphabet-list">
	<li><a href="javascript:;">A</a></li>
	<li><a href="javascript:;">B</a></li>
	<li><a href="javascript:;">C</a></li>
	<li><a href="javascript:;">...</a></li>
</ul>
<pre>
<!-- /#alphabet-list -->

Not that the anchor’s `href` attribute is set to `javascript:;`. This is because we want the let the user know that the text can be clicked (but we’re going to let the rest of the work be done in JavaScript).

Filter The Names

Finally, we’re ready to filter all rows that do not start with the clicked letter. To do this, jQuery’s selectors make this really easy.

Simply put, we’ll hide all elements that do not start with the letter that was clicked:

$('#alphabet-list').on('click', 'li a', function(evt) {

	evt.preventDefault();

	// Grab the letter that was clicked
	var sCurrentLetter = $(this).text().toLowerCase();

	// Now hide all rows that have IDs that do not start with this letter
	$('tbody > tr:not( [id^="' + sCurrentLetter + '"] )').hide();

});

And that does it.

Sure, you can take this a step further and provide some styling and additional filtering to enhance the experience, but this is enough to get started.

Again, this isn’t something I recommend for exceptionally large datasets, but if the data is relatively modest, then go for it.