jQuery - 根据 3 个输入字段值过滤列表

Question

我有 3 个输入字段来检查某些尺寸的产品。 让我们称之为宽度，高度，长度。

然后我有一个要过滤的宽度、高度和长度的主列表。

当我在输入字段中输入数字时，它应该过滤并显示数组或类似内容中最接近的匹配作业。 我希望这只是 jQuery 和 HTML。 你能帮我吗？ 我不知道从哪里开始。

 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

请检查，

希望下面的回答对你有帮助

 // 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>