• Choose a category
• All
• Classic-Fiction

return false;

}

return $(this)

.text()

.toLowerCase()

.indexOf(search) > - 1

})

.attr('selected', 'selected');

}

What’s going on here? First, we’re grabbing all list items and then clearing any previous selections (by setting selected to an empty string). Next, we’re using the filter action to find any elements we’re searching for.

The filter action accepts a function as a parameter, and runs that function against every jQuery object in the selection. If the function returns true, the element stays in the selection. But if the function returns false—it’s gone … out of the selection, and unaffected by further processing.

To find elements we care about, we check to see if the text they contain has the text we’re looking for in it. To do this we use the text action that gives us a string. We convert it to lower case (so the search will be case-insensitive), and check to see if our source text is located in the element string. The JavaScript indexOf method will find the position of a string inside another string; for example, "hello".indexOf('ll'); will return 2 (the index starts at 0, as usual). If the substring is not found, indexOf will return -1, which is what we’re checking for here.

Whichever elements remain in the jQuery selection after the filter function runs must contain the keyword we’re looking for—so once again we use the attr method to select them.

To use the search method we created, we could attach it to a click handler—so the user types a word and then clicks a search button. Even better is to attach a keyup handler to the input itself, so it selects as you type:

chapter_08/03_select_lists/script.js (excerpt)

$('#search').keyup(function() {

SWAPLIST.search("#a-listers, #candidates", $(this).val());

});

Trees

“This is another mess. We have several subcategories of celebrities … you know, A-listers who are in bands, or who are famous because their parents are rich; B-listers who came in second on some reality TV contest, stuff like that. Right now they’re all in one big list. I need to see how the categories fit inside each other! Can you build something to help me?”

The client’s talking about a tree. Trees are few and far between on the Web for two reasons: they’re hard to do well, and there are few situations where they make sense. However, a nested set of categories is a valid use of a tree structure (a more common one is representing a directory structure), so let’s dive in!

Expandable Tree

Here’s the secret about trees: they’re really just nested lists! The key to dealing with trees in jQuery is to make sure your HTML is consistent—so we can figure out where we are, and open and close the correct branches. The control we’ll build will look like the one in Figure 8.3. We’ve kept the styling deliberately sparse, but as always the potential for improving the appearance is limited only by your CSS skills!

Figure 8.3. Tree

The important part of our markup is the span that contains each category (or directory) name. We’ll use this span as a base for inserting a small plus/minus graphic—to act as the branch toggle. Here’s a subset of the markup we’ll be working with:

chapter_08/04_expandable_tree/index.html (excerpt)

• A-list Celebrities

  • In a successful band

    • Johnny Stardust
    • Glendatronix

  …

  • Famous because they're rich

    • Dot-Com millionaires

      • Joel Mynor

      …

      
      The tree can nest as far as is needed—just repeat the structure inside the appropriate child list item. Because it’s nice and consistent, you can easily generate the HTML on the server.

      With the list on the page, the next step is to pretty it up with some CSS. That’s in your court, but our code will add a few extra classes you can use to customize the display. The handle class will be assigned to the element we’ll insert to act as the toggle handle. When a branch of the tree is opened, it’ll receive the opened class; otherwise it’ll have the closed class. We’ve used these classes