Sandbox: JavaScript

Filters a list of elements as you type.

Example

The easiest example is on display to your left in the navigation for Sandbox. Here's what it looks like:

<div class="example">
  <div class="filter form-group">
    <div class="input-group input-group-sm input-group-rounded">
      <span class="input-group-btn">
          <button type="submit" class="btn"><span class="fui-search"></span></button>
      </span>

      <input type="search" class="form-control" placeholder="Filter" id="search-query-9" data-behavior="Filter" data-filter-options="
        'items':'!.example li'
      ">
    </div>

  </div>
  <ul class="nav nav-list nav-list-vivid">
    <li class="nav-header">Europe</li>
    <li>
      <a href="#fakelink">
        London, United Kingdom
        <span class="badge pull-right">19</span>
      </a>
    </li>
    <li class="active">
      <a href="#fakelink">
        Berlin, Germany
        <span class="badge pull-right">130</span>
      </a>
    </li>
    <li>
      <a href="#fakelink">
        Madrid, Spain
        <span class="badge pull-right">9</span>
      </a>
    </li>
    <li class="divider"></li>
    <li class="nav-header">Asia</li>
    <li>
      <a href="#fakelink">
        Shanghai, China
        <span class="badge pull-right">69</span>
      </a>
    </li>
    <li>
      <a href="#fakelink">
        Bombay, India
        <span class="badge pull-right">21</span>
      </a>
    </li>
    <li>
      <a href="#fakelink">
        Karachi, Pakistan
        <span class="badge pull-right">40</span>
      </a>
    </li>
  </ul>
</div>

Performance Considerations

This behavior iterates over all the children as the user types. It includes default rate limit such that key strokes that occur less than 200ms apart reset the timer, filtering only when the user stops typing. Still, extremely large lists with hundreds of items will likely introduce sluggish response times.

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
items string '+ul li', The items that get hidden as you elimate them when you type.
text string 'a' An (optional) sub-selector of the items that includes the search text (as their innerHTML). In the default configuration, it filters on the text inside the anchor tags of a list. Note If an item does not have a matching text element the entire innerHTML of the item is used. In this case, if you had a list of links but also list items with text that was not a link, it would filter on the list item's innerHTML instead.
hideClass string 'hide' The class to add to items that do not match the filter.
rateLimit number 200 The rate limit for typing; key strokes made within this duration reset the timer. Override this to zero if you want a very responsive list, but only if the list count is relatively short.