CODEWITHSUNDEEP
javascripthtml
user9196457
user9196457

Reputation:

Active Search Bar for images

I am trying to add an an ID to my images so I can search through a large list of them.
I have CSS so that my images are in line
My HTML

<html>
	<title>WhitePaper Repository</title>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet" />
		<h1 align=center>Header</h1>
		<h2 align=center>Sub-Header</h2>
		<script type="text/javascript" src="search.js"></script>
		<input type="text" id="myinput" onkeyup="myFunction()" name="search" placeholder="Search..">
	</head>
	<body>
		<div id="images">
			<a href="https://example.com"><img src="img/btc.png" alt="Bitcoin"></a>
			<a href="https://example.com"><img src="img/ethereum.png" alt="Ethereum"></a>
			<a href="https://example.com"><img src="img/ripple.png" alt="Ripple"></a>
			<a href="https://example.com"><img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"></a>
			<a href="https://example.com"><img src="img/ada.png" alt="Cardano"></a>
			<a href="https://example.com"><img src="img/nem.png" alt="NEM"></a>
			<a href="https://example.com"><img src="img/Litecoin.png" alt="LiteCoin"></a>
			<a href="https://example.com"><img src="img/stellar.png" alt="Stellar Lumens"></a>
			
		</div>
	</body>
</html>

My JavaScript

<script>
function myFunction() {
 
    var input, filter, div, a, img, i;
    input = document.getElementById('myinput');
    filter = input.value.toUpperCase();
    div = document.getElementById("images");
    a = ul.getElementsByTagName('a');


    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

I would like to be able to add ids or something to each of the images so when people search using the search bar only the examples of the ones that contain the letters remain.

Upvotes: 2

Views: 3533

Answers (1)

Cybernetic
Cybernetic

Reputation: 13334

You can do it with Jquery. 

<html>
<head>
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
</head>
<body>
<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="http://vu.hn/images/BitcoinCashLogo.png" alt="Bitcoin" width=130></a>
            <a href="https://example.com"><img src="https://www.ethereum.org/images/logos/ETHEREUM-LOGO_PORTRAIT_Black_small.png" alt="Ethereum" width=130></a>
            <a href="https://example.com"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130></a>
            <a href="https://example.com"><img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="Bitcoin Cash" width=130></a>
            <a href="https://example.com"><img src="https://themerkle.com/wp-content/uploads/cardano.jpg" alt="Cardano" width=130></a>
            <a href="https://example.com"><img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130></a>
            <a href="https://example.com"><img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130></a>
            <a href="https://example.com"><img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130></a>
</div>
</body>
</html>

<script>
$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        $("img[alt*=" + val + "]").show();
    }
});
</script>

enter image description here

The GIF makes it looks slow but this is fast in reality. You can also make the search case insensitive.

** EDIT **

As per additional requests:

Making it case insensitive, and spaces in the attribute searchable:

Adding the case insensitivity flag 'i' inside the regex part of the selector makes it case insensitive:

$("img[alt*=" + val + " i]").show();

And escaping spaces:

val = val.split(" ").join("\\ ");

in attribute selector makes spaced attributes searchable by jquery. This is to account for Jquery's API-like syntax for selectors, which allows us to target spaced attributes. The new code is: 

$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        val = val.split(" ").join("\\ ");
        $("img[alt*=" + val + " i]").show();
    }
});

Aligning images with css and clickable overlay:

This can be done using the following approach: 

<div class="image123">
    <div class="imgContainer">
        <a href="https://example.com"><img src="images/bit_logo.png" alt="Bitcoin" width=130><div class="overlay"><div class="text">Bitcoin</div></div></a>   
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="images/ethereum_logo.png" alt="Ethereum" width=130><div class="overlay"><div class="text">Ethereum</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="images/ripple_logo.png" alt="Ripple" width=130><div class="overlay"><div class="text">Ripple</div></div></a>
    </div>
</div>

...along with appropriate styling:

.imgContainer{
    float:left;
}
img {
width: 120px !important; 
}
body {
background: white !important; 
}
.imgContainer {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.imgContainer:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

The following shows both bitcoin and bitcoin cash searchable, along with aligned images with clickable overlays:

enter image description here

Upvotes: 3

Related Questions