Fork me on GitHub
Attention: This component is still under progress and experimental.
butterItemFilterField is a jQuery plugin that filters html element with the css class filterable-item. It is applied to the search field.
If no filter text is entered, then all filterable-items are displayed. Else the search field value is matched against all text contained by a filterable-item.
Example
Some filterable item...
Another one.
And yet another one with slightly more text.
This one will not get filtered out because it does not have the class filterable-item. 
                            <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:b="http://butterfaces.org/components"> 
<h:head /> 
<body>
    <h:form id="formId">
        <div class="form-inline small-margin-bottom">
            <div class="form-group">
                <label for="myItemFilterField" class="control-label">Filter:</label>
                <input type="text" id="myItemFilterField" class="form-control" data-filterable-item-container="#itemContainer"/>
            </div>
        </div>
        <div class="well" id="itemContainer">
            <div class="filterable-item">
                Some filterable item...
            </div>
            <div class="filterable-item">
                Another <b>one</b>.
            </div>
            <div class="filterable-item">
                And yet another one with slightly more text.
            </div>
            <div>
                <i>This one will not get filtered out because it does not have the class <code>filterable-item</code>.</i>
            </div>
        </div>

        <script type="text/javascript">
            // activate jquery plugin
            jQuery('#myItemFilterField').butterItemFilterField();
        </script>

        /* add jQuery and jQuery plugins to html head part */
        <b:activateLibraries />
    </h:form> 
</body> 
</html>