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

Is it possible to bind a function to data in Vue js?

Merge two separate mongodb records

Is there a way for me to update the button text and class to make it toggle-like

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

Inserting HTML content into a DIV with the help of jQuery

Is it possible for Vue Router to remember the scroll position on a route and return to the same position when navigating back?

Add both single (' ') and double (" ") quotes within the `document.querySelector` code

I'm attempting to render HTML emails in ReactJS

Utilize AJAX within an Angular method

Choose gets stuck while loading an abundance of data using JQuery's .html() and JSON

Reviving jQuery Smooth Zoom Pan viewer following container resize

Data loss occurs when the function malfunctions

What is the best way to fill HTML tables using an ajax response?

What are some ways to optimize Ajax requests for improved speed when multiple identical requests are made on a single webpage?

Handling JSON Deserialization Error in C# with jQuery and ASMX

Protractor unable to locate elements using by.repeater

Extracting CSS from a cell in a Datatable and applying it to other cells within the table

What is the best way to test an externally hosted application with Testacular and AngularJS?

The placeholder within my input moves up and down when switching the input type from password to text

The position of the jQuery VirtualKeyboard is not displaying correctly