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>