show an element if text input is not empty using jQuery

Ok, so I got the element coded and such. It just bit odd, since if the form is empty a clear button is showing in a form of an image ex: (x)

Here is the script, upon page load jQuery focuses on the text input field, and in the same time displays the (x) clear class. What I wish to achieve is this.

Upon page load jQuery still focuses on the text input field, however it does not display clear class (x) but will display it only if there is at least 1 character inputed into the text field other vise it is not displayed.

here is the current code

$(document).ready(function() {
             $('#ui_query').focus();
        });

        $('#ui_query').focus(function() {
             $('.clear-helper').css('opacity','0.9999');
        });

        $(document).focusout(function() {
             $('.clear-helper').css('opacity','0.3333');
        });



        开发者_如何学Go(function ($, undefined) {
        $.fn.clearable = function () {
        var $this = this;
        $this.wrap('<div class="clear-holder" />');
        var helper = $('<span class="clear-helper"></span>');
        $this.parent().append(helper);
        helper.click(function(){
            $this.val("");
            $('#ui_query').focus();
        });
        };      
        })(jQuery);

        $("#ui_query").clearable();

You can use the attribute-not-equals attribute selector to target inputs with non-blank values:

$('#ui_query[value!=""]').doSomething();

If you don't want a space character to count as "something" then you can do:

if($.trim($('#ui_query').val()) !== "") {
    $('.clear-helper').css('opacity','0.9999');
}