“input=text”字段中的引導程序過濾值

Question

我有要使用 bootstrap/jquery 過濾的數據

我沒有使用表格，只是 div row 和 cols

我的表格看起來像這個例子

我的代碼看起來像這樣

 <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370329" value="Mécanosoudures"></div> </div <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370330" value="Boulonneride"></div> </div <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370332" value="Bâti de flèche" ></div> </div>

我想過濾 input="text" 字段中的值（Mécanosoudures、Boulonneride、Bâti de flèche）

我通過放置 javascript 來嘗試這種方法

 <script> $(document).ready(function(){ $("#MyInspectionModules").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#MyInspection *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script>

然后添加搜索框

 <input class="form-control" id="MyInspectionModules" type="text" placeholder="Rechercher un module ou sous module">

但它沒有過濾值

我需要將值放在輸入文本字段之外才能過濾它們，但這不是我需要的

我試圖將值放在行 div 中

 <div class="row" id="Mécanosoudure"> bla bla bla <div class="row" id="boulonnerie"> bla bla bla <div class="row" id="bâti de fleche"> bla bla bla

但這也不起作用，

任何人都可以幫助解決這個問題，注意我需要顯示完整的行，而不僅僅是包含搜索值的列

謝謝

Answer 1

你可以這樣做：過濾所有輸入值，然后隱藏不需要的結果

 $(document).ready(function(){ $("#MyInspectionModules").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#MyInspection input").filter(function() { if(.($(this).val().toLowerCase().indexOf(value) >= 0)){ $(this).parent().parent();hide(). }else{ $(this).parent().parent();show(); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" id="MyInspectionModules" type="text" placeholder="Rechercher un module ou sous module"> <div id="MyInspection"> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370329" value="Mécanosoudures"></div> </div> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370330" value="Boulonneride"></div> </div> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370332" value="Bâti de flèche" ></div> </div> </div>

Answer 2

您可以使用輸入值的選擇器直接顯示和隱藏：

$("input:not([value*='"+value+"'])").parent().hide();

 $(document).ready(function(){ $("#MyInspectionModules").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#MyInspection input").parent().show(); $("#MyInspection input:not([value*='"+value+"'])").parent().hide(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" id="MyInspectionModules" type="text" placeholder="Rechercher un module ou sous module"> <div id="MyInspection"> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370329" value="Mécanosoudures"></div> </div> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370330" value="Boulonneride"></div> </div> <div class="row"> <div class="col-md-4"> <input class="form-control form-control-sm" type="text" name="inspectiondetailLibelle_370332" value="Bâti de flèche" ></div> </div> </div>

更短的代碼。