Lightning Add/Filter List

filter.app

<aura:application extends="force:slds">
    <!-- All items added to the list -->
    <aura:attribute name="data" type="List" default="[]" />
    <!-- The list of currently viewable items -->
    <aura:attribute name="filteredData" type="List" default="[]" />
    <!-- Input for a new item -->
    <aura:attribute name="newItem" type="String" />
    <!-- Input for the filter text -->
    <aura:attribute name="filter" type="String" />
    
    <!-- Real time filtering based on changes to the filter text -->
    <aura:handler name="change" value="{!v.filter}" action="{!c.updateFilter}" />
    
    <!-- Wrapper element to support Enter key -->
    <div onkeyup="{!c.key}">
        <!-- New string to add to the list -->
        <lightning:input aura:id="newItemBox" name="x" value="{!v.newItem}" label="Add" />
    </div>
    <!-- Add to list -->
    <lightning:button label="Add" onclick="{!c.add}" />
    <!-- Filter input -->
    <lightning:input name="x" value="{!v.filter}" label="Filter" />
    <hr />
    <!-- List of all items when filter = "", or case insensitive match otherwise -->
    <aura:iteration items="{!v.filteredData}" var="row" indexVar="rowIndex">
        <lightning:input disabled="{!true}" name="x" value="{!row}" label="{!'Item '+(rowIndex+1)}" />
    </aura:iteration>
</aura:application>

filterController.js

({
    // Detect Enter key
    key: function(component, event, helper) {
        if(event.which === 13) {
            helper.add(component);
            helper.updateFilter(component);
        }
    },
    // Button click handler
	add: function(component, event, helper) {
		helper.add(component);
        helper.updateFilter(component);
	},
    // Fired when the filter changes
    updateFilter: function(component, event, helper) {
        helper.updateFilter(component);
    }
})

filterHelper.js

({
    // Add a new item to the list
	add: function(component) {
		var data = component.get("v.data"),
            newItem = component.get("v.newItem");
        component.find("newItemBox").focus();
        if(!newItem) {
            return;
        }
        data.push(newItem);
        component.set("v.newItem", null);
	},
    // Apply filter to the list of all items
    updateFilter: function(component) {
        var data = component.get("v.data"),
            term = component.get("v.filter"),
            newdata = data.filter(word => (!term) || word.toLowerCase().indexOf(term.toLowerCase()) > -1);
        component.set("v.filteredData", newdata);
    }
})