搜索页面，使用 <img alt> 在 Bootstrap 3 中显示 div答案

【问题标题】：Search page, using <img alt> to display divs in Bootstrap 3搜索页面，使用 <img alt> 在 Bootstrap 3 中显示 div
【发布时间】：2019-07-22 04:15:44
【问题描述】：

我正在尝试构建一个 jQuery 实时搜索，它根据 HTML 中的图像 alt 内容显示 div。

我找到了一个示例here，它使用标签class 中的文本来实现。我将它应用于我的 Bootstrap 示例。如何使用alt 中的文本找到它？我做错了什么？

// then, on entering text...
$("#filter").on("keyup", function() {
  if ($(this).val().length > 0) {
    // hide everything,
    $(".media").hide();
    // get the text in the input
    var mySearch = $(this).val();
    var alt = $(this).find("img").attr("[alt*='" + mySearch + "' i]");
    // show any class that contains the input
    alt.show();
  } else {
    $(".media").show();
  }

});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>My Items</h2>

<br>
<input class="form-control" type="text" class="text-input" id="filter" placeholder=" Search item" />

<br/>
<br/>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Mountain brown bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">1</h3>bear hug
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Russian Road salmon bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">2</h3>bear fight
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Uganda contest forest ">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">3</h3>bear stare
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://placekitten.com/60/60" alt="UK London Restaurant meat">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">4</h3>bears bath
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Somalia splash Sea">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">5</h3>bear splash
  </div>
</div>

Codepen

【问题讨论】：

为了将来参考，所有与您的问题相关的代码都应该是in问题，而不是链接到场外。我已经为你编辑了问题。
@RoryMcCrossan 哦，是的，对不起。感谢您指出了这一点。并用于编辑。
没问题 - 我在下面为你添加了答案

标签： jquery html image search alt

【解决方案1】：

你的逻辑有几个问题。首先，您从对input 的引用中执行find('img')，因此永远找不到任何东西。其次，您正在搜索整个 alt 值的匹配项。大概来自您要在每个单词上匹配的描述。您可以通过使用filter() 和正则表达式来实现这一点，如下所示：

$("#filter").on('input', function() {
  var mySearch = $(this).val();
  var $media = $(".media");  
  
  if (mySearch.trim().length > 0) {
    var $mediaToShow = $media.hide().filter(function() {
      var re = new RegExp(mySearch, 'gi');
      return re.test($(this).find('img[alt]').prop('alt'));
    });
    $mediaToShow.show();
  } else {
    $media.show();
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>My Items</h2><br>
<input class="form-control" type="text" class="text-input" id="filter" placeholder=" Search item" /><br/><br/>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Mountain brown bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">1</h3>bear hug
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Russian Road salmon bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">2</h3>bear fight
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Uganda contest forest ">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">3</h3>bear stare
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="UK London Restaurant meat">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">4</h3>bears bath
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Somalia splash Sea">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">5</h3>bear splash
  </div>
</div>

还要注意 input 事件的使用，而不是 keyup，因为前者在将内容粘贴到字段时也可以工作。

【讨论】：

非常感谢罗里。不过是一个查询 - var result = re.test($(this).find('img[alt]').prop('alt')); 你能解释一下这部分吗？为什么要在img[alt] 中寻找属性alt？为什么不只是img？
很高兴为您提供帮助。那是寻找任何具有alt 属性的img 元素，以获得轻微的性能优势。你可以单独使用img，但这会选择所有图像，即使是那些没有alt的图像。

【解决方案2】：

你也可以在没有库的情况下实现它，但你需要为 IE 支持填充包含。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill

document.getElementById("filter").addEventListener('keyup', function (event) {
  document.querySelectorAll('.media').forEach(function (element) {
    element.style.display = element.querySelector('img').alt.includes(event.target.value)
    ? 'block' 
    : 'none'
  })
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>My Items</h2>

<br />
<input class="form-control" type="text" class="text-input" id="filter" placeholder=" Search item" />
<br/>
<br/>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Mountain brown bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">1</h3>bear hug
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Russian Road salmon bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">2</h3>bear fight
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Uganda contest forest ">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">3</h3>bear stare
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://placekitten.com/60/60" alt="UK London Restaurant meat">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">4</h3>bears bath
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Somalia splash Sea">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">5</h3>bear splash
  </div>
</div>

【讨论】：