Toggle the visibility of image elements depending on the input entered in the search bar using jQuery

Question

Toggle the visibility of image elements depending on the input entered in the search bar using jQuery

I have a photo gallery grid and I am looking to implement a search functionality for an img tag's 'data-title' value, where only images with matching data will be displayed. For example, if I type "hay" into the search box, only the image below should appear, while all other images without "hay" in their data-title will be hidden.

<a href="photo_gallery\photos\01.jpg" data-lightbox="gallery" data-title
 ="Hay Bales - I love hay bales. Took this snap on a drive through the 
 countryside past some straw fields.">
    <img src="photo_gallery\photos\thumbnails\01.jpg" alt="fields">
</a>

I tried customizing some code found here to hide divs but ran into difficulty when trying to search the data-title attribute. Every time I type something in the search box, all images get hidden regardless of their data-title attribute.

$('#search').keyup(function() {

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($('a[data-title='+value+']', this).text());
        $(this).toggle(isMatch);
    });
});

Can someone point out what I might be doing wrong here? This is how the search bar is currently structured.

 <div class="searchBar">
   <input type="text" name="search" id="search" placeholder="Search">
 </div>

javascript jquery html css toggle

Answer 1

Answer №1

To ensure accurate results, it is important to consider that anchor tags without text nodes may not work effectively with the JQuery .text() method. Therefore, it is recommended to target the element's data attribute and utilize it as the basis for your regular expression test.

$('#search').keyup(function() {

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($(this).data('title'));
        $(this).toggle(isMatch);
    });
});

Answer 2

To ensure accurate results, it is important to consider that anchor tags without text nodes may not work effectively with the JQuery .text() method. Therefore, it is recommended to target the element's data attribute and utilize it as the basis for your regular expression test.

$('#search').keyup(function() {

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($(this).data('title'));
        $(this).toggle(isMatch);
    });
});

Answer 3

Answer №2

A different approach could be to completely eliminate the use of RegExp since you have an html5 data set available. You can directly compare the values if needed.

Here is an example:

https://jsfiddle.net/abc123/xzy789lmn/4/

Answer 4

A different approach could be to completely eliminate the use of RegExp since you have an html5 data set available. You can directly compare the values if needed.

Here is an example:

https://jsfiddle.net/abc123/xzy789lmn/4/

Toggle the visibility of image elements depending on the input entered in the search bar using jQuery

Answer №1

Answer №2

Similar questions

react-router is unable to navigate to the desired page

React: When state is updated and a console.log is used, the console displays the previous state instead of the updated

Storing a selected database column as a variable from an HTML page in Node.js with Express

The alignment of Material-UI Button and ButtonGroup is not consistent

Uploading a file to a URL using Node.js

A directive containing a template

Two functions that require multiple clicks to execute

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

I seem to be having trouble with my JavaScript code when attempting to search for items within

Modify the behavior of the tab key using JavaScript

When attempting to redirect to a different page using setTimeout, the loading process appears to continue indefinitely

instructions on implementing Arial Black font style in LESS

What steps should I take to create a stylish HTML profile with well-organized CSS?

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

Stop the color buffer from being automatically cleared in WebGL

Reloading a page in Vue-Router after submitting a form

Change the border color of radio buttons when clicked

Transmitting information to the service array through relentless perseverance

Prevent the rendering of HTML in the combobox dropdown menu

Guide on positioning an SVG button within a form