Страница поиска, используяотображать div в Bootstrap 3

Question

Я пытаюсь создать живой поиск jQuery, который отображает div на основе контента alt в HTML.

Я нашел пример здесь , который делает это, используя текст из тега 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

Вы также можете достичь этого без библиотек, но для поддержки 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>

Answer 2

В вашей логике есть пара проблем.Во-первых, вы делаете 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, так как первое также будет работать при вставке содержимого в поле.