i have this code
$("#search").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
$("img[alt*=" val "]").show();
}
});
that makes you search trought images without any problem,
as this, it works case sensitive and i dont want that;
to make it case insensitive i'd have to add an i here
$("img[alt*=" val " i]").show(); before the ].
now it is case insensitive but the problem is that when i write numbers in the search bar it doesnt show anything but without the i it works
test here https://codepen.io/jvstalf/pen/LYQXoVy
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('bigImage');
if (!container.contains(e.target)) {
document.getElementById("overlay").style.display = "none";
document.getElementById("bigImage").style.display = "none";
}
});
/* var mq = window.matchMedia( "(max-width: 1080px)" );
if (mq.matches) {
function showThumbnail(){
console.log('error')
}
}
function showThumbnail(clicked_id) {
document.getElementById("overlay").style.display = "inherit";
document.getElementById("bigImage").style.display = "inherit";
document.getElementById("bigImage").src = document.getElementById(clicked_id).src;
}; */
var mq = window.matchMedia( "(max-width: 1080px)" );
function showThumbnail(clicked_id) {
if (mq.matches) {
console.log('error')
} else {
document.getElementById("overlay").style.display = "inherit";
document.getElementById("bigImage").style.display = "inherit";
document.getElementById("bigImage").src = document.getElementById(clicked_id).src;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<meta name="google" value="notranslate">
<link rel="icon" href="images/logo.png">
<title>jvstalf</title>
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div >
<h1 >A L F</h1>
<h3>portfolio</h3>
</div>
<div >
<input type="search" id="search" placeholder="search...">
</div>
<div >
<div id="results" ></div>
<div id="overlay">
</div>
<img id="bigImage">
<div >
<div >
<img src="Thumbnails/1000.png" alt="1000" id="img1" onclick="showThumbnail(this.id)">
<img src="Thumbnails/1330x.png" alt="1330x" id="img2" onclick="showThumbnail(this.id)">
<img src="Thumbnails/1729.png" alt="1729" id="img3" onclick="showThumbnail(this.id)">
<img src="Thumbnails/1729 2.png" alt="1729" id="img4" onclick="showThumbnail(this.id)">
<img src="Thumbnails/900.png" alt="900" id="img5" onclick="showThumbnail(this.id)">
<img src="Thumbnails/A2Marbl.png" alt="A2Marbl" id="img6" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Acropolix.png" alt="Acropolix" loading="lazy" id="img7" onclick="showThumbnail(this.id)">
<img src="Thumbnails/acu.png" alt="Acu" loading="lazy" id="img8" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Aftermath.png" alt="Aftermath" loading="lazy" id="img9" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Allegiance2.png" alt="Allegiance" loading="lazy" id="img10" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Apocalyptic Trilogy.png" alt="Apocalyptic trilogy" loading="lazy" id="img11" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Artifice.png" alt="Artifice" loading="lazy" id="img12" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Artificial Ideology.png" alt="Artificial Ideology" loading="lazy" id="img13" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Awakening Horus.png" alt="Awakening Horus" loading="lazy" id="img14" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Balengu Vortex.png" alt="Balengu Vortex" loading="lazy" id="img15" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Bausha Vortex.png" alt="Bausha Vortex" loading="lazy" id="img16" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Bloodbath.png" alt="Bloodbath" loading="lazy" id="img17" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Calculator Core.png" alt="Calculator Core" loading="lazy" id="img18" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Capastep.png" alt="Capastep" loading="lazy" id="img19" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Cataclysm 2.png" alt="Cataclysm" loading="lazy" id="img20" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Cataclysm.png" alt="Cataclysm" loading="lazy" id="img21" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Caution.png" alt="Caution" loading="lazy" id="img22" onclick="showThumbnail(this.id)">
<img src="Thumbnails/ClubCore.png" alt="ClubCore" loading="lazy" id="img23" onclick="showThumbnail(this.id)">
<img src="Thumbnails/CMYK.png" alt="CMYK" loading="lazy" id="img24" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Crazy III neeew.png" alt="Crazy III" loading="lazy" id="img25" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Crimson Planet.png" alt="Crimson Planet" loading="lazy" id="img26" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Crowd Control.png" alt="Crowd Control" loading="lazy" id="img27" onclick="showThumbnail(this.id)">
<img src="Thumbnails/dance massacre.png" alt="Dance Massacre" loading="lazy" id="img28" onclick="showThumbnail(this.id)">
<img src="Thumbnails/daydream.png" alt="Daydream" loading="lazy" id="img29" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Diffuse.png" alt="Diffuse" loading="lazy" id="img30" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Disruption.png" alt="Disruption" loading="lazy" id="img31" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Doradura.png" alt="Doradura" loading="lazy" id="img32" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Duelo Maestro.png" alt="Duelo Maestro" loading="lazy" id="img33" onclick="showThumbnail(this.id)">
<img src="Thumbnails/FireWall.png" alt="FireWall" loading="lazy" id="img34" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Funk Tower.png" alt="Funk Tower" loading="lazy" id="img35" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Hyper Paradox.png" alt="Hyper Paradox" loading="lazy" id="img36" onclick="showThumbnail(this.id)">
<img src="Thumbnails/HyperSonic.png" alt="HyperSonic" loading="lazy" id="img37" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Ijen.png" alt="Ijen" loading="lazy" id="img38" onclick="showThumbnail(this.id)">
<img src="Thumbnails/MagmaCore.png" alt="MagmaCore" loading="lazy" id="img39" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Make it Drop.png" alt="Make it Drop" loading="lazy" id="img40" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Misty Mountains.png" alt="Misty Mountains" loading="lazy" id="img41" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Molten Mercury.png" alt="Molten Mercury" loading="lazy" id="img42" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Nibelheim.png" alt="Nibelheim" loading="lazy" id="img43" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Osanda Verdict 3.png" alt="Osanda Verdict" loading="lazy" id="img44" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Phonk Town.png" alt="Phonk Town" loading="lazy" id="img45" onclick="showThumbnail(this.id)">
<img src="Thumbnails/psychosis.png" alt="Psychosis" loading="lazy" id="img46" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Reanimate.png" alt="reanimate" loading="lazy" id="img47" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Reflective.png" alt="Reflective" loading="lazy" id="img48" onclick="showThumbnail(this.id)">
<img src="Thumbnails/reverence.png" alt="Reverence" loading="lazy" id="img49" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Revolt.png" alt="Revolt" loading="lazy" id="img50" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Rust.png" alt="Rust" loading="lazy" id="img51" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Sakupen Hell.png" alt="Sakupen Hell" loading="lazy" id="img52" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Seiryoku.png" alt="Seiryoku" loading="lazy" id="img53" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Sonic Wave Nerfed.png" alt="Sonic Wave Nerfed" loading="lazy" id="img54" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Speedrun.png" alt="Speedrun" loading="lazy" id="img55" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Subsonic.png" alt="Subsonic" loading="lazy" id="img56" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Sunset Sandstorm.png" alt="Sunset Sandstorm" loading="lazy" id="img57" onclick="showThumbnail(this.id)">
<img src="Thumbnails/The Creation.png" alt="The Creation" loading="lazy" id="img58" onclick="showThumbnail(this.id)">
<img src="Thumbnails/The Hell Factory.png" alt="The Hell Factory" loading="lazy" id="img59" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Voltaic.png" alt="Voltaic" loading="lazy" id="img60" onclick="showThumbnail(this.id)">
<img src="Thumbnails/Worse Trip.png" alt="Worse Trip" loading="lazy" id="img61" onclick="showThumbnail(this.id)">
</div>
</div>
</div>
<script>
$("#search").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
$("img[alt*=" val " i]").show();
}
});
</script>
</body>
</html>CodePudding user response：
When you use the [attr*=value i] selector, you'll need to wrap the value in single quotes, otherwise the browser will not consider it a valid selector when you use a number value.
Therefore it should look like [attr*='value' i].
So change
$("img[alt*=" val " i]").show();
to
$("img[alt*='" val "' i]").show();