Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » Libraries » Downloads
 
Add your own
alternative version

A Watermarked Auto-complete jQuery Plugin

, 20 Aug 2011
This article presents a watermarked auto-complete jQuery plugin
jquery-watermarkAutocomplete-1.0.1.zip
Watermarkautocomplete.zip
Watermarkautocomplete
Watermarkautocomplete
Watermarkautocomplete.suo
bin
Content
redmond
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_55_fbec88_40x100.png
ui-bg_glass_75_d0e5f5_1x400.png
ui-bg_glass_85_dfeffc_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_gloss-wave_55_5c9ccc_500x100.png
ui-bg_inset-hard_100_f5f8f9_1x100.png
ui-bg_inset-hard_100_fcfdfd_1x100.png
ui-icons_217bc0_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_469bdd_256x240.png
ui-icons_6da8d5_256x240.png
ui-icons_cd0a0a_256x240.png
ui-icons_d8e7f3_256x240.png
ui-icons_f9bd01_256x240.png
Controllers
Global.asax
Models
Properties
Scripts
Watermarkautocomplete.csproj.user
(function ($) {
    // jQuery methods
    var methods = {
        init: function (options) {
            // default options
            var settings = {
                watermarkstyle: { "color": "grey", "font-style": "italic" },
                watermarktext: "Please Enter some text",
                autocompletesource: null,
                autocompleteselect: null,
                autocompletechange: null,
                allowfreetext: false,
                watermarkenabled: true
            }

            return this.each(function () {
                if (options) {
                    var $this = $(this);

                    // merge the input options with the default options
                    $.extend(settings, options);
                    if (!settings.regulartextstyle) {
                        var regulartextstyle = {
                            "color": $this.css("color"),
                            "font-style": $this.css("font-style")
                        }

                        settings.regulartextstyle = regulartextstyle;
                    }
                    settings.watermarktext = $.trim(settings.watermarktext);

                    // initiate the jQuery data for each selected dom object
                    // this may introduce redundent data sets, but it also allows
                    // individual configuration if needed later.
                    var instancedata = { options: $.extend({}, settings), data: {} };
                    $this.data("watermarkAutocomplete", instancedata);

                    // setup auto complete if the source functions are provided
                    // through the option Json object.
                    if (instancedata.options.autocompletesource) {
                        $(this).autocomplete({
                            source: instancedata.options.autocompletesource,
                            select: function (event, ui) {
                                if (instancedata.options.autocompleteselection) {
                                    instancedata.options.autocompleteselection(event, ui);
                                }

                                instancedata.data.autocompleteselection = ui.item;
                            },
                            change: function (event, ui) {
                                var $this = $(this);
                                if (instancedata.options.autocompletechange) {
                                    instancedata.options.autocompletechange(event, ui);
                                }
                                if (!instancedata.options.allowfreetext) {
                                    clearfreetext($this, instancedata.options, instancedata.data);
                                }
                            }
                        });
                    }

                    // null the selection when user type in anything
                    $this.bind("keyup.watermarkAutocomplete", function () {
                        var instancedata = $(this).data("watermarkAutocomplete");
                        instancedata.data.autocompleteselection = null;
                    });

                    // clear watermark when focus
                    $this.bind("focus.watermarkAutocomplete", function () {
                        var $this = $(this);
                        var instancedata = $this.data("watermarkAutocomplete");
                        if (instancedata.options.watermarkenabled) {
                            clearwatermark($this, instancedata.options);
                        }
                    });

                    // apply watermark when lose focus
                    $this.bind("blur.watermarkAutocomplete", function () {
                        var $this = $(this);
                        var instancedata = $this.data("watermarkAutocomplete");
                        if (instancedata.options.watermarkenabled) {
                            applywatermark($this, instancedata.options);
                        }
                    })

                    // Set the initial watermark
                    if (instancedata.options.watermarkenabled) {
                        applywatermark($this, instancedata.options);
                    }
                }
            });
        },

        enablewatermark: function (enable) {
            return this.each(function () {
                var $this = $(this);
                var instancedata = $this.data("watermarkAutocomplete");
                instancedata.options.watermarkenabled = enable;

                if (enable) {
                    applywatermark($this, instancedata.options);
                }
                else {
                    clearwatermark($this, instancedata.options);
                }
            });
        },

        allowfreetext: function (allow) {
            return this.each(function () {
                var $this = $(this);
                var instancedata = $this.data("watermarkAutocomplete");

                instancedata.options.allowfreetext = allow;
                if (!instancedata.options.allowfreetext) {
                    clearfreetext($this, instancedata.options, instancedata.data);
                }
            });
        },

        distroy: function () {
            return this.each(function () {
                var $this = $(this);
                var instancedata = $this.data("watermarkAutocomplete");
                clearwatermark($this, instancedata.options);
                $this.removeData("watermarkAutocomplete");
                $this.unbind(".watermarkAutocomplete");
                $this.autocomplete("destroy");
            });
        }
    };

    // The jQuery entry point
    $.fn.watermarkAutocomplete = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error("Method " + method + "does not exist on jQuery.watermarkAutocomplete");
        }
    };

    // utility functions
    var applywatermark = function ($this, options) {
        var text = $.trim($this.val());
        if ((text == "") || (text == options.watermarktext)) {
            $this.css(options.watermarkstyle);
            $this.val(options.watermarktext);
        }
    };

    var clearwatermark = function ($this, options) {
        var text = $.trim($this.val());
        if (text == options.watermarktext) {
            $this.val("");
        }
        $this.css(options.regulartextstyle);
    };

    var clearfreetext = function ($this, options, data) {
        if (!data.autocompleteselection) {
            $this.val("");
            if (options.watermarkenabled) {
                applywatermark($this, options);
            }
        }
    };

})(jQuery);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dr. Song Li

United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 20 Aug 2011
Article Copyright 2011 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid