Bootstrap/JQuery实现input文本框值过滤（非表格布局）求助

你的思路方向是对的，但之前的代码没生效主要是两个核心问题：获取input内容的方式错误，以及选择器范围太宽泛导致逻辑混乱。下面是修正后的完整解决方案：

1. 先给待过滤的Row添加统一类名 #

给每个包含目标input的row加上专属类（比如inspection-row），这样能精准定位到需要过滤的元素：

<!-- 搜索框 -->
<input class="form-control mb-3" id="MyInspectionModules" type="text" placeholder="Rechercher un module ou sous module">

<!-- 待过滤的内容区域 -->
<div class="row inspection-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 inspection-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 inspection-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>

2. 修正JavaScript过滤逻辑 #

我们需要遍历每个目标row，取出内部input的value属性值做匹配判断，而不是用text()方法：

$(document).ready(function(){
  $("#MyInspectionModules").on("keyup", function() {
    // 获取搜索值并转为小写，实现大小写不敏感匹配
    var searchValue = $(this).val().toLowerCase();
    
    // 遍历所有待过滤的row
    $(".inspection-row").each(function() {
      // 取出当前row内input的value值，转为小写
      var inputValue = $(this).find("input").val().toLowerCase();
      
      // 匹配逻辑：搜索框为空则显示所有；否则只显示值匹配的row
      // 如果你需要完全匹配（而非包含匹配），把indexOf改成 === 即可
      if (searchValue === "" || inputValue.indexOf(searchValue) !== -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});

为什么之前的代码失效？ #

• text()方法不适用input：input的内容存储在value属性里，text()只能获取标签包裹的文本内容（比如<div>文本</div>），对input完全无效。
• 选择器范围太广：$("#MyInspection *")会选中容器内所有子元素（包括col、input等），导致toggle逻辑混乱，我们需要直接定位到每个独立的row。

内容的提问来源于stack exchange，提问作者Cloud-VGP Services