Question

I am using the plugin available here to remove the text in the textbox by clicking on the X button. How do I modify the code so that the X button shows up only when text is entered in the text box?
I tried setting condition on the return starement in JavaScript code: if ($('#search').val().length != 0) but it dint work.
Here is the code I tried:

$(document).ready(function(){
    if ($('#search').val().length != 0){
        $('#search').clearable();
        $('.divclearable').show();
    }
    else{
        $('.divclearable').hide();
    }
});

Any help would be highly appreciated.

Answer 1

Add a keyup listener –

$(function () {
    $("#search").on("keyup", function() {
        if ($('#search').val().length != 0){
            $('#search').clearable();
            $('.divclearable').show();
        }
        else{
            $('.divclearable').hide();
        }
    });
});