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.
There were some errors in the code.
Best Answer
You can use below code: HTML:
JS: