jQuery - Filter a list based on 3 input field values

Question

I have 3 input fields to check some sizes of products. Lets call it Width, Height, Length.

Then I have a master list of Widths, Heights, and Lengths where I want to filter.

When I enter numbers into the input fields, it should filter and show the closest matching jobs from an array or something similar. I want this to be jQuery and HTML only. Can you help? Im not sure where to start.

 Width <input type="text"><br> Lendth <input type="text"><br> Height <input type="text"><br> <input type="submit"> <br/><br/> PRODUCT LIST<br> 120 X 180 X 75 Company A $333<br> 127 X 80 X 175 Company A $715<br> 76 X 280 X 75 Company D $343<br> 220 X 110 X 175 Company E $133<br> 650 X 70 X 98 Company F $238<br> 150 X 10 X 77 Company S $342<br> 420 X 5 X 122 Company A $597<br>

Answer 1

Please Check,

I hope following answer will help you

 // When page loading display all output elements ___ $(this).show(); // create fuunction for button click ___ function formSubmit(){ var W = $('.widthInput').val(); // get width value from input var L = $('.lengthInput').val(); // get length value from input var H = $('.heightInput').val(); // get height value from input var V = W + ' X ' + L + ' X ' + H; // get Width X Length X Height as a string var outputList = $('.outputList > p'); // get voutput element // check wth each output element outputList.each(function(){ var outPutVal = $(this).text(); // get each output item text // cross check "output item text" with input values and show hide the elements if(outPutVal.includes(V)) { outputList.hide(); $(this).show(); } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Width <input type="text" class="widthInput"><br> Lendth <input type="text" class="lengthInput"><br> Height <input type="text" class="heightInput"><br> <input type="submit" onclick="formSubmit();"> <br/><br/> PRODUCT LIST<br> <div class="outputList"> <p>120 X 180 X 75 Company A $333</p> <p>127 X 80 X 175 Company A $715</p> <p>76 X 280 X 75 Company D $343</p> <p>220 X 110 X 175 Company E $133</p> <p>650 X 70 X 98 Company F $238</p> <p>150 X 10 X 77 Company S $342</p> <p>420 X 5 X 122 Company A $597</p> </div>