Search functionality for lightning:dualListbox

I have implemented the lightning:dualListbox in my component.

CaseLabelSearchaleDualListBox.cmp:

<aura:component controller="CasesLabelsController" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
    <!--Declare Event Handlers-->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" description="Call doInit function on component load to get picklist values"/>
     <aura:handler name="change" value="{!v.term}" action="{!c.search}" />
    <!--Declare Attributes-->
    <aura:attribute name="GenreList" type="List" default="[]" description="Labels Picklist Values"/>
    <aura:attribute name="selectedGenreList" type="List" default="[]" description="Selected Labels Picklist Values"/>
    <aura:attribute name="requiredOptions" type="List" default="[]"/>
    <aura:attribute name="term" type="String" />
    <!--ui:button label="{!v.recordId}"/-->     
    <lightning:input type="text" value="{!v.term}" placeholder="Search" />
    <div class="slds-m-around_xx-large">
        <lightning:dualListbox aura:id="selectGenre"
                               name="Genre"
                               label="Edit Labels"
                               sourceLabel="Available Labels"
                               selectedLabel="Selected Labels"
                               options="{!v.GenreList}"
                               value="{!v.selectedGenreList}"
                               onchange="{!c.handleGenreChange}"/>
        <br/>
        <lightning:button label="Save Labels" onclick="{!c.saveLables}" />
    </div>
</aura:component>
CaseLabelSearchableDualListBoxController:

({
    doInit: function(component, event, helper) {
        var action = component.get("c.getPiklistValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
               // alert(result);
                var plValues = [];
                for (var i = 0; i < result.length; i++) {
                    plValues.push({
                        label: result[i],
                        value: result[i]
                    });
                }
                component.set("v.GenreList", plValues);
                
            }
        });
        $A.enqueueAction(action);
        this.search(component);
        
        var action2 = component.get("c.getSelectedLabels");
        
        
        var selectedRecordId = component.get("v.recordId");
        //alert('Selected recId = '+selectedRecordId);
        action2.setParams({ 
            "selectedRecId": selectedRecordId
        });
        action2.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result2 = response.getReturnValue();
                var selValues = [];
                for (var j = 0; j < result2.length; j++) {
                    selValues.push(result2[j]);
                }
                component.set("v.selectedGenreList", selValues);
            }  
            else{
                alert('error');
            }
        });
        $A.enqueueAction(action2);
        
        
    },
     search: function(component) {
        // Search term
        var term = component.get("v.term");
        // Show all when no filter, or when filter matches label or value
         component.set("v.GenreList",
                      component.get("v.GenreList")
                      .filter(
                          item => !term || 
                          item.value.match(term) || 
                          item.label.match(term)));
         
         
    },
    
    saveLables : function(component, event, helper) {
        //save the labels
        var selectedValues = component.get("v.selectedGenreList");
        console.info('>>>>>selectedValues = '+selectedValues);
        var action3 = component.get("c.saveLabels");
        
        var selectedRecordId = component.get("v.recordId");
        action3.setParams({ 
            "selectedLabels": selectedValues,
            "selectedRecId": selectedRecordId
        });
        action3.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result4 = response.getReturnValue();
                
                var sMsg = 'Labels successfully saved \n';
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    mode: 'sticky',
                    message: sMsg,
                    type : 'success'
                });
                toastEvent.fire();
            }  
            else{
                alert('error');
            }
        });
        $A.enqueueAction(action3);
    },
     
    handleGenreChange: function (component, event, helper) {
        //Get the Selected values   
        var selectedValues = event.getParam("value");
         
        //Update the Selected Values  
        component.set("v.selectedGenreList", selectedValues);
    },
     
    getSelectedGenre : function(component, event, helper){
        //Get selected Genre List on button click 
        var selectedValues = component.get("v.selectedGenreList");
        console.log('Selectd Genre-' + selectedValues);
    }
})

 But when I searched 2nd time in the searchbox the values that are selected in the 1st time is vanished from the selected box?