CODEWITHSUNDEEP
javascripthtml
Savannah Smith
Savannah Smith

Reputation: 3

Filtering images live search by caption

I am having trouble getting this code to run. I want to do a live search and hide any photos with captions that do not match the search text. I would appreciate any tips!

HTML

enter image description here

JavaScript

https://i.sstatic.net/6bZwR.png

Thanks!

Upvotes: 0

Views: 618

Answers (1)

Jorg
Jorg

Reputation: 7250

This would be fairly efficient:

let $search = $('#search');
let $imgs = $('img')

$search.keyup(event => {
  let value = $search.val().toLowerCase();
  $imgs.show();
  if (value !== '') {
    $imgs.not('[title*="' + value + '"]').hide();
  }
});

Try it: https://jsfiddle.net/ct8jgvyd/1/

edit: code without arrow functions etc

var $search = $('#search');
var $imgs = $('img')

$search.keyup(function(event) {
  var value = $search.val().toLowerCase();
  $imgs.show();
  if (value !== '') {
    $imgs.not('[title*="' + value + '"]').hide();
  }
});

Upvotes: 1

Related Questions