Utilize jQuery to hide and then show elements based on text input

Question

Utilize jQuery to hide and then show elements based on text input

Recently, I came across a useful jQuery filter example that sparked my interest. To test it out, I created my live example and shared the code on CodePen (or you can check out the Fiddle if you prefer).

One issue I encountered was that after entering text in the input field, the boxes would realign but the numbers wouldn't reappear when the text was deleted unless the page was refreshed. I played around with the code snippet below, but couldn't find a solution. Your help is greatly appreciated!

    $('#sortable').change(
function(){
if ($(this).val().length) {
    $('#number').hide();
}
else {
    $('#number').show();
}

});

javascript jquery html css

Answer 1

Answer №1

Give this a try:- http://jsfiddle.net/adiioo7/nYYBU/10/

JavaScript Code:-

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function listFilter(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var list = $("#sortable");
            var filter = $(this).val();
            console.log(filter.length);
            if (filter.length > 0) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(".number").hide();
                $(".numberstwo").hide();
            } else {
                console.log($(".number"));
                $(".number").show();
                $(".numberstwo").show();
                $(list).find("a").parent().slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();

        });
    }
    $(function () {
        listFilter($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 2

Give this a try:- http://jsfiddle.net/adiioo7/nYYBU/10/

JavaScript Code:-

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function listFilter(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var list = $("#sortable");
            var filter = $(this).val();
            console.log(filter.length);
            if (filter.length > 0) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(".number").hide();
                $(".numberstwo").hide();
            } else {
                console.log($(".number"));
                $(".number").show();
                $(".numberstwo").show();
                $(list).find("a").parent().slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();

        });
    }
    $(function () {
        listFilter($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 3

Answer №2

Here's the revised JavaScript code...

Take a look at this Demo Fiddle

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function filterList(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var filter = $(this).val();
            if (filter) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).find("a:Contains(" + filter + ")").parent().slideDown();
            } else {
                $(list).find("li").slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();
            if ($(this).val().length) {
                $('.number').hide();
            } else {
                $('.number').show();
            }

        });
    }
    $(function () {
        filterList($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 4

Here's the revised JavaScript code...

Take a look at this Demo Fiddle

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function filterList(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var filter = $(this).val();
            if (filter) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).find("a:Contains(" + filter + ")").parent().slideDown();
            } else {
                $(list).find("li").slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();
            if ($(this).val().length) {
                $('.number').hide();
            } else {
                $('.number').show();
            }

        });
    }
    $(function () {
        filterList($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 5

Answer №3

I typically use the keyup event to validate input text. The change event is only triggered after a user finishes typing and exits the input box.

Answer 6

I typically use the keyup event to validate input text. The change event is only triggered after a user finishes typing and exits the input box.

Answer 7

Answer №4

$('.sortable-list').on('focusout', function(){
    var inputLength = $(this).val().length;
    if (inputLength) {
        $('.number-label').css('display', 'none');
    }
    else {
        $('.number-label').show();
    }

Answer 8

$('.sortable-list').on('focusout', function(){
    var inputLength = $(this).val().length;
    if (inputLength) {
        $('.number-label').css('display', 'none');
    }
    else {
        $('.number-label').show();
    }

Utilize jQuery to hide and then show elements based on text input

Answer №1

Give this a try:- http://jsfiddle.net/adiioo7/nYYBU/10/

Answer №2

Answer №3

Answer №4

Similar questions

The concatenation of Ajax results appears to append to the existing data

D3 - Rounded edge chart width

The flashing of Bootstrap tabs can be seen on various pages

Tips for extracting information from a Javascript Prompt Box and transferring it to a PHP variable for storage in an SQL database

Experiencing issues in retrieving data post-login using ASP.net session key method

Bring together the Django blog project with an existing HTML website

Start and Pause PHP Execution on Demand

Learning about the intricacies of backend Node.js through Angular using GET requests

Error encountered in TypeScript's Map class

Why does JavaScript often return the constructor of an object instead of false?

The method I used to position a triangle at the bottom border of a parent element with relative

The parameter type 'Event' cannot be assigned to the argument type

What is the best way to invoke a function only once in typescript?

What steps should I take to address the issue of sanitizing a potentially harmful URL value that contains a

Limiting Firebase queries with startAt and endAt

Seemingly the Tailwind Styles are failing to take effect in my Next.js Project

Ensuring the next tab is not accessible until all fields in the current tab are filled

Delivering Access data in HTML format via email

Embracing async-await while awaiting events in node.js

Turn off the option to select a specific time from the dropdown menu on the datepicker. Additionally, if a particular