Skip to content
Advertisement

jquery input doesnt accept numbers when set to case insensitive

Alf

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 class="header">
        <h1 class="headertext">A L F</h1>
        <h3>portfolio</h3>
    </div>
  <div class="search-wrapper">
    <input type="search" id="search" class="search-bar" placeholder="search...">
  </div>
    <div class="body">
      <div id="results" class="result"></div>
      <div class="overlay" id="overlay">
    </div>
    <img class="bigImage" id="bigImage">
      <div class="images">
        <div class="grid">
        <img class="grid-item" src="Thumbnails/1000.png" alt="1000" id="img1" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/1330x.png" alt="1330x" id="img2" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/1729.png" alt="1729" id="img3" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/1729 2.png" alt="1729" id="img4" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/900.png" alt="900" id="img5" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/A2Marbl.png" alt="A2Marbl" id="img6" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Acropolix.png" alt="Acropolix" loading="lazy" id="img7" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/acu.png" alt="Acu" loading="lazy" id="img8" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Aftermath.png" alt="Aftermath" loading="lazy" id="img9" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Allegiance2.png" alt="Allegiance" loading="lazy" id="img10" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Apocalyptic Trilogy.png" alt="Apocalyptic trilogy" loading="lazy" id="img11" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Artifice.png" alt="Artifice" loading="lazy" id="img12" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Artificial Ideology.png" alt="Artificial Ideology" loading="lazy" id="img13" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Awakening Horus.png" alt="Awakening Horus" loading="lazy" id="img14" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Balengu Vortex.png" alt="Balengu Vortex" loading="lazy" id="img15" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Bausha Vortex.png" alt="Bausha Vortex" loading="lazy" id="img16" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Bloodbath.png" alt="Bloodbath" loading="lazy" id="img17" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Calculator Core.png" alt="Calculator Core" loading="lazy" id="img18" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Capastep.png" alt="Capastep" loading="lazy" id="img19" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Cataclysm 2.png" alt="Cataclysm" loading="lazy" id="img20" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Cataclysm.png" alt="Cataclysm" loading="lazy" id="img21" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Caution.png" alt="Caution" loading="lazy" id="img22" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/ClubCore.png" alt="ClubCore" loading="lazy" id="img23" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/CMYK.png" alt="CMYK" loading="lazy" id="img24" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Crazy III neeew.png" alt="Crazy III" loading="lazy" id="img25" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Crimson Planet.png" alt="Crimson Planet" loading="lazy" id="img26" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Crowd Control.png" alt="Crowd Control" loading="lazy" id="img27" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/dance massacre.png" alt="Dance Massacre" loading="lazy" id="img28" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/daydream.png" alt="Daydream" loading="lazy" id="img29" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Diffuse.png" alt="Diffuse" loading="lazy" id="img30" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Disruption.png" alt="Disruption" loading="lazy" id="img31" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Doradura.png" alt="Doradura" loading="lazy" id="img32" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Duelo Maestro.png" alt="Duelo Maestro" loading="lazy" id="img33" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/FireWall.png" alt="FireWall" loading="lazy" id="img34" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Funk Tower.png" alt="Funk Tower" loading="lazy" id="img35" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Hyper Paradox.png" alt="Hyper Paradox" loading="lazy" id="img36" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/HyperSonic.png" alt="HyperSonic" loading="lazy" id="img37" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Ijen.png" alt="Ijen" loading="lazy" id="img38" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/MagmaCore.png" alt="MagmaCore" loading="lazy" id="img39" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Make it Drop.png" alt="Make it Drop" loading="lazy" id="img40" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Misty Mountains.png" alt="Misty Mountains" loading="lazy" id="img41" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Molten Mercury.png" alt="Molten Mercury" loading="lazy" id="img42" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Nibelheim.png" alt="Nibelheim" loading="lazy" id="img43" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Osanda Verdict 3.png" alt="Osanda Verdict" loading="lazy" id="img44" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Phonk Town.png" alt="Phonk Town" loading="lazy" id="img45" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/psychosis.png" alt="Psychosis" loading="lazy" id="img46" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Reanimate.png" alt="reanimate" loading="lazy" id="img47" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Reflective.png" alt="Reflective" loading="lazy" id="img48" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/reverence.png" alt="Reverence" loading="lazy" id="img49" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Revolt.png" alt="Revolt" loading="lazy" id="img50" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Rust.png" alt="Rust" loading="lazy" id="img51" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Sakupen Hell.png" alt="Sakupen Hell" loading="lazy" id="img52" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Seiryoku.png" alt="Seiryoku" loading="lazy" id="img53" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Sonic Wave Nerfed.png" alt="Sonic Wave Nerfed" loading="lazy" id="img54" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Speedrun.png" alt="Speedrun" loading="lazy" id="img55" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Subsonic.png" alt="Subsonic" loading="lazy" id="img56" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Sunset Sandstorm.png" alt="Sunset Sandstorm" loading="lazy" id="img57" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/The Creation.png" alt="The Creation" loading="lazy" id="img58" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/The Hell Factory.png" alt="The Hell Factory" loading="lazy" id="img59" onclick="showThumbnail(this.id)">
        <img class="grid-item" src="Thumbnails/Voltaic.png" alt="Voltaic" loading="lazy" id="img60" onclick="showThumbnail(this.id)">
        <img class="grid-item" 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>

Advertisement

Answer

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();

RCS
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement