Hi... I've taken my time reading many articles before making this question.

I want to use the jquery library in aura:component.

I can not get the element using the jquery selector... some time it works and another time it doesn't.

here is the code:
aura:component

<aura:component controller="CASExportFile" >
    
        <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.search}" />

	    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="selectedRowsCount" type="Integer" default="0"/>
    <aura:attribute name="maxRowSelection" type="Integer" default="1000"/>
    <aura:attribute name="hasRecords" type="Boolean" default="false"/>
    
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <!-- the container element determine the height of the datatable -->
    <aura:if isTrue="{!v.hasRecords}">
     <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                
                    <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="CAS Config">
                    <span>CAS Export Files</span>
                    </a>
                    </h2>
                    </div>
            </header>
        </div>
    <div >
        
        
         <div class="search">
        <div class="search-wrapper">

                <div class="search-input-wrapper">
                    <input id="searchid" class="search-input thesearcher" type="text" placeholder="My Search" />


                </div>


        </div>
    </div>
        
        <h1>Selected Rows: {! v.selectedRowsCount }</h1>
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            maxRowSelection="{! v.maxRowSelection }"
            onrowselection="{! c.updateSelectedText }"/>
    </div>
    </article>
    </aura:if>

</aura:component>

aura:controller... it's only a test before implementing the filtering code
 

search : function(component, event, helper){
                 
        jQuery("document").ready(function(){
            
            console.log('>>loaded');
            console.log('1.0>>'+$('#searchid').val());
            
            
        });
   }

I got in the console: 
>>loaded
1.0>>undefined

my purpose with this is to filter the tr element from the table base on typing in searchid

this is the code for the filter​​​​​

//Searching & removing
                                $('#searchid').keyup(function() {
                                    search_table($(this).val());
                                });
                                function search_table(value) {

                                    $('.slds-hint-parent')
                                            .each(
                                                    function() {
                                                        var found = 'false';
                                                        $(this)
                                                                .each(
                                                                        function() {
                                                                            if ($(
                                                                                    this)
                                                                                    .text()
                                                                                    .toLowerCase()
                                                                                    .indexOf(
                                                                                            value
                                                                                                    .toLowerCase()) >= 0) {
                                                                                found = 'true';
                                                                            }
                                                                        });
                                                        if (found == 'true') {
                                                            $(this).show();
                                                        } else {
                                                            $(this).hide();
                                                        }
                                                    });
                                    //END: Searching & removing
                                }

Thanks!