0

I'm trying to have the search while type jquery which would filter the table content based the inputtext typed. https://www.w3schools.com/jquery/jquery_filters.asp

I tried to implement the same from w3schools but for some reason i'm unable to make it work. Please let me know what is missing. Thank you!

Below is the script used in VFP

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    j$ = jQuery.noConflict();        
    function myfunction(){
      j$("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myOppsTable tbody tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    }
</script>

Below is the complete page

<apex:page sidebar="false" docType="html-5.0" readOnly="true" lightningStylesheets="true">
<apex:slds />    
<apex:form >
    <input class="slds-m-top_small" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by Opp..." title="Type in an Opp Name"/>       
    <apex:outputPanel id="myOppsTablePanel">  
            <table class="oppstbl slds-table slds-table_cell-buffer slds-table_bordered" id="myOppsTable">
                <thead id="oppstblHeader">
                    <tr>
                        <th>Opportunity</th>
                        <th>field1</th>
                        <th>field2 Type</th>
                        <th>field3 Start</th>
                        <th>field4 End</th>
                        <th>field5 Budget</th>
                        <th>field6 version</th>
                        <th>field7 ($)</th>
                        <th>field8 (%)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="myOppsTableRow" class="pointer">
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr> 
                    <tr class="inner-table {!o.oppId}">
                        <td>
                            <table class="innertbl slds-table slds-table_cell-buffer slds-table_bordered" id="myInnertbl" style="width:100%;">
                                <thead id="myInnertblHeader">
                                    <tr>
                                        <th></th>
                                        <th>Jan</th>
                                        <th>Feb</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Jan val</td>
                                        <td>feb val</td>
                                        <td>mar val</td>
                                    </tr>
                                </tbody> 
                            </table>   
                        </td>                     
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>
                    <tr>
                        <td style="text-align:left">OppName</td>
                        <td>28</td>
                        <td>random</td>
                        <td>hhh</td>
                        <td>shkhask</td>
                        <td>dkfnlnfd</td>
                        <td>gajljds</td>
                        <td>ujdldns</td>
                        <td>somedate</td>
                    </tr>  
                </tbody>
            </table>
    </apex:outputPanel>
</apex:form>

</apex:page>

The above script is working fine when slds & lightning styling classes are NOT added. Issue occurs when i try to apply the styling classes.

0

You can use below code: HTML:

<input class="slds-m-top_small" type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search by Opp..." title="Type in an Opp Name"/>  

 

JS:

    function myFunction(_elem){
        var value = _elem.value;
        j$('#myOppsTable').find('.pointer').each(function(){
            if(j$(this).text().toLowerCase().includes(value.toLowerCase()))
                j$(this).show();
            else
                j$(this).hide();
        });
    }
| improve this answer | |
1

This doesn't work because you can't get elements by ID using the approach you have applied. This is because IDs get mangled by the Visualforce page in order to ensure they are unique. Take a look at the documentation.

You need to access the elements using a different approach, such as via using a data-id attribute. This attribute doesn't get mangled but can be used in CSS and jQuery selectors. You can see an example of defining such an attribute here; you must put html-data-id in the Visuaforce markup, but the CSS/jQuery selector still sees it as "data-id".

| improve this answer | |
  • Thanks for the response @Phil W. Updated my question where i added by initial approach which is working perfectly fine without slds & styling classes. Issue occurs if i use slds & lightning styling classes as shown in my original post. Not sure what might be messing up my "Initial Script" which works on a non-slds page. – SMorse Jun 29 at 10:32
  • Please don't rely on ID - it isn't going to work for you with Visualforce in general. It isn't the SLDS styling that messes it up IMHO, but rather it is the visualforce page mangling of IDs that is breaking it. Switch to using something like data-id and you'll be fine. – Phil W Jun 29 at 10:36
  • I recommend you take a look at the rendered page in your browser's DOM inspector/dev console. You will see what happens to your ID values. The values they get mapped to depends on the path within the page structure to the element. – Phil W Jun 29 at 10:38
  • function myFunction(){ var val = j$('#myInput').val(); j$('#myOppsTable').find('.myOppsTableRow').each(function(){ if(j$(this).text().toUpperCase().indexOf(val.toUpperCase()) > -1) j$(this).show(); else j$(this).hide(); }); } – SMorse Jun 29 at 21:28
  • I don't mean the function, I mean the DOM. – Phil W Jun 29 at 21:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.