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

Question

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

我找到了一个示例，它使用来自标签 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

你的逻辑有几个问题。首先，您正在根据对 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 上的使用，因为前者在将内容粘贴到字段中时也会起作用。

Answer 2

你也可以在没有库的情况下实现它，但你需要 polyfill includes 以支持 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>

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

Search page, using <img alt> to display divs in Bootstrap 3

html

search

jquery

image

alt