JavaScript搜索筛选功能异常求助：meta标签检索与布局调整问题

问题1：仅基于.meta类内容搜索 #

修改JavaScript检索逻辑，不再检查整个网格项的文本内容，而是专门定位到每个网格项内的.meta元素，提取其内容进行匹配。

问题2：匹配项从左上角重新排列 #

确保不匹配元素被完全从布局流中移除（通过display: none），这样布局系统会自动让剩余匹配项重新填充位置。jQuery的toggle()方法隐藏元素时默认设置display: none，只要你的.grid是流式/网格布局（比如display: grid或带flex-wrap: wrap的flex布局），就能实现自动排列。

修改后的完整代码 #

JavaScript

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $(".grid").children().each(function() {
      // 仅获取当前网格项内.meta元素的文本内容
      var metaText = $(this).find('.meta').text().toLowerCase();
      // 根据匹配结果切换元素显示/隐藏
      $(this).toggle(metaText.indexOf(value) > -1);
    })
  });
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="搜索OC角色">
<div class="grid">
  <div class="griditem marvel spn mmcu b7s tgw">
    <div class="wombo">
      <img src="https://placecats.com/neo/300/200">
      <div class="name">Alex Romanoff</div>
      <div class="meta">Alex Romanoff, Marvel, Multifandom</div>
      <div class="info">
        <hr>
        <div class="subname">multifandom | anya taylor joy</div><br>
        <i class="fa-regular fa-heart"></i> loki, other<br>
        <a href="">更多 </a> | <a href="">标签</a>
        <p>"It must be exhausting always rooting for the anti-hero."</p>
      </div>
    </div>
  </div>
  <!-- 可添加更多网格项测试功能 -->
</div>

关键修改说明 #

1. 移除冗余事件绑定：删除了输入框中的onkeyup="myFunction()"，避免和jQuery的事件绑定冲突，同时防止未定义函数报错。
2. 缩小检索范围：用$(this).find('.meta').text()替代$(this).text()，确保只基于.meta元素内的内容进行搜索匹配。
3. 确保布局重排：通过toggle()控制元素display属性，隐藏的元素完全脱离布局流，剩余匹配项会根据.grid的布局规则自动重新排列。如果.grid还没设置合适的布局样式，可以添加以下CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

内容的提问来源于stack exchange，提问作者Quinncity