function to add the clear functionality to input type="search"

jquery.searchFieldClear.js

var searchFieldClear = function() {

    var public = {};
    var clearButtonCss = {
        cursor: 'pointer',
        margin: '12px 0 0 -16px',
        position: 'absolute',
        zIndex: 1000
    }
    var buttonExists = false;


    public.fieldChanged = function(el) {
        $this = $(el);
        if ($this.val() != '') {
            if (!buttonExists) addClearButton(el);
        } else {
            removeClearButton(el);
        }
    };

    var addClearButton = function(el) {
        var dataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAMAAADXT/YiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJQTFRFMleWP2qzVXGdVnGdRoHQRnrJYYzHzdjrhJa0Zoi/aIzEW3iqaI3DXYO+ganW5u314OTqPWKjYY3HPmes3+TqP2uzUWuTT2qTfpCsZ4i+XoS/hJaz5uz1zdXiMleVRoLQgajVNFeTWnepRnrKf5Gt+vv8QGanUm2a4uv16u3z7PL4NFmY9fb45+vw5+323+TsKk6HiKjT7fH3197r+vv9////sKEdSwAAAF5JREFUeNoEwYkCQkAABNAphRBSuYpC1rqvnf//td5D95VUlG6H9aRPnILPCs+qrkZ6dt7gdnneD8lGKO7iJnYqsLX7oi9bYtbQZE1+nPFaopFjuJgYfg/W9OPhL8AA3QMKtgCDsdQAAAAASUVORK5CYII=";
        var $img = $('<img></img>')
            .addClass('search-clear').attr('src', dataImg).attr('alt', 'clear search')
            .css(clearButtonCss)
            .on('click', function(e) {
                $(this).prevAll('input[type="search"]').val('').focus();
                removeClearButton(el);
            });
        $img.insertAfter($(el));
        buttonExists = true;
    };

    var removeClearButton = function(el) {
        $(el).nextAll('img.search-clear').remove();
        buttonExists = false;
    };

    return public;
}();