The next widget we'll look at is the filterable widget. This is a generic concept of a widget that provides a way to automatically filter the data inside it. Imagine a large list. By allowing the user to filter, they can quickly focus on the content they are trying to find.
The general process for creating filterable content involves a few steps. You can begin by adding a form field that lets the user enter text. In theory, any content that throws a change event can be used, but in most cases, you'll want to use a simple text field. Next, you need to add data-filter="true" to the parent element whose children will be filtered. In the same element, you also need to provide data-input with a value that points to the jQuery selector of the text field you set up first. In general, this is the process. Let's consider a simple example:
Listing 7-9: test_filter.html <div role="main" class="ui-content"> <form> <input type="text" id="myFilter" placeholder...