Блог

Главная - Вопросы по программированию - Фильтр поиска Jquery для изображений на основе тега ALT

Фильтр поиска Jquery для изображений на основе тега ALT

#jquery #search #filter #alt

Вопрос:

Я создаю страницу поиска для галереи изображений на основе тега alt. В конечном итоге в галерее будет более 3000 фотографий. Отображаются только изображения, соответствующие тексту из строки поиска. Страница обновляется по мере ввода, отражая текущие совпадения. До сих пор у меня есть хорошая рабочая модель, благодаря публикациям, которые я нашел здесь, посвященным почти той же задаче. Мне нужно, чтобы мой фильтр поиска был нечувствителен к регистру и пробелам. Мой текущий код работает почти так, как задумывалось, с одной небольшой проблемой. При вводе из строки поиска не будет отображаться совпадений для цифровых символов в теге alt.

 $('img').hide();

$("#myinput").keyup(function() {
  var val = $.trim(this.value);
  val = val.split(" ").join("\ ");
  if (val === "")
    $('img').hide();
  else {
    $('img').hide();
    $("img[alt*="   val   " i]").show();
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" name="search" placeholder="search..." style="width:200px; height: 40px; border-radius: 4px; font-size: 18px;"><br>
<div id="images">
  <a href="https://example.com"><img src="https://picsum.photos/id/100/200/300" alt="Beach 194888" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1002/200/300" alt="Earth 2069" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1003/200/300" alt="Bambi" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1015/200/300" alt="River" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1027/200/300" alt="Roksolana Zasiadko" width=130></a>

</div>

Ответ №1:

Это будет фильтровать ввод без учета регистра с цифрами или без цифр

 const $img = $("#images img");
$("#myinput").on("input",function() {
  $img.hide();
  const val = this.value.trim().toLowerCase();  
  if (val === "") return; 
  $img.filter(function() { return this.alt.toLowerCase().includes(val)  }).show()
}); 
 #images img { display: none } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" name="search" placeholder="search..." style="width:200px; height: 40px; border-radius: 4px; font-size: 18px;"><br>
<div id="images">
  <a href="https://example.com"><img src="https://picsum.photos/id/100/200/300" alt="Beach 194888" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1002/200/300" alt="Earth 2069" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1003/200/300" alt="Bambi" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1015/200/300" alt="River" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1027/200/300" alt="Roksolana Zasiadko" width=130></a>

</div>

Комментарии:

1. @Tim — я сократил его. СУХОЙ — не нужно прятаться дважды

Метки: