搜索页面，使用<img alt=""/>在Bootstrap 3中显示div

Question

我正在尝试构建一个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

Answer 1

您的逻辑中有两个问题。首先，您正在从引用find('img')开始input，因此将一无所获。其次，您要搜索整个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事件，因为当内容粘贴到字段中时，前者也将起作用。

Answer 2

您也可以在不使用库的情况下实现它，但是您需要添加polyfill以获得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>