sdesai · November 23, 2010 19:11
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en-us">
 <head>
    <title>YUI Autocomplete with Prompt</title>
    <script src="http://yui.yahooapis.com/3.3.0pr1/build/yui/yui.js"></script>

    <script>

    // A Prompt Plugin for AutoComplete. It can be used with the AutoComplete Plugin, 
    // as in this example, or directly with AutoCompleteList

    YUI.add('autocomplete-prompt', function (Y) {
    
        function AutoCompletePrompt(config) {
            AutoCompletePrompt.superclass.constructor.apply(this, arguments);
        }

        Y.extend(AutoCompletePrompt, Y.Plugin.Base, {

        initializer: function () {
            this.afterHostEvent("render", function() {
                this._bindPrompt();
            });
        },

        destructor : function() {
            if (this._h) this._h.detach();
        },

        _bindPrompt: function () {
            this._h = this.get("host").get("inputNode").on("focus", this._showPrompt, this);
        },

        _showPrompt: function (e) {
            var elm = this.get("host").get("inputNode");

            if (elm.get("value") === "") {
                elm.get("parentNode").one(".yui3-aclist-content ul").set("innerHTML","<li>" + this.get("text") + "</li>");
                elm.ac.show();
            }
        }
    
    }, {
      NAME      : 'pluginAutoCompletePrompt',
      NS        : 'prompt',
      ATTRS     : {
        // You don't need to prefix everything with prompt, since you have your own NS
        // promptText : {  
        text: { 
            value: 'Please start typing to enable autocomplete' 
        }
      }
    });
    
    Y.Plugin.AutoCompletePrompt = AutoCompletePrompt;
    
    }, '1.0', { requires: ['node', 'plugin'] });      
    </script>
 </head>
 <body class="yui3-skin-sam">
    <button id="changePrompt">Change Prompt</button>
    <form>
        <input type="text" id="location" value="" />
    </form>

    <script type="text/javascript" charset="utf-8">
    YUI({ filter: 'raw'}).use('autocomplete', 'autocomplete-prompt','autocomplete-highlighters', function (Y) {

        // Plugin to all AutoCompleteLists, with a custom configuration
        Y.Base.plug(Y.AutoCompleteList, {fn:Y.Plugin.AutoCompletePrompt, cfg:{text:"Booyah!"}});  

        var location = Y.one('#location');

        location.plug(Y.Plugin.AutoComplete, {
            resultTextLocator: function (r) { return r.name + ', ' + r.adminCode1; },
            resultHighlighter: 'phraseMatch',
            source: "use 'http://illanti.com/yql/geonames.autocomplete.city.xml' as cities; select * from cities where query = '{query}';"
        });

        Y.one("#changePrompt").on("click", function() {
            location.ac.prompt.set("text", "FooBar!");        
        });
    });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<title>YUI Autocomplete with Prompt</title>
	<script src="http://yui.yahooapis.com/3.3.0pr1/build/yui/yui.js"></script>

	<script>

	// A Prompt Plugin for AutoComplete. It can be used with the AutoComplete Plugin,
	// as in this example, or directly with AutoCompleteList

	YUI.add('autocomplete-prompt', function (Y) {

	function AutoCompletePrompt(config) {
	AutoCompletePrompt.superclass.constructor.apply(this, arguments);
	}

	Y.extend(AutoCompletePrompt, Y.Plugin.Base, {

	initializer: function () {
	this.afterHostEvent("render", function() {
	this._bindPrompt();
	});
	},

	destructor : function() {
	if (this._h) this._h.detach();
	},

	_bindPrompt: function () {
	this._h = this.get("host").get("inputNode").on("focus", this._showPrompt, this);
	},

	_showPrompt: function (e) {
	var elm = this.get("host").get("inputNode");

	if (elm.get("value") === "") {
	elm.get("parentNode").one(".yui3-aclist-content ul").set("innerHTML","<li>" + this.get("text") + "</li>");
	elm.ac.show();
	}
	}

	}, {
	NAME : 'pluginAutoCompletePrompt',
	NS : 'prompt',
	ATTRS : {
	// You don't need to prefix everything with prompt, since you have your own NS
	// promptText : {
	text: {
	value: 'Please start typing to enable autocomplete'
	}
	}
	});

	Y.Plugin.AutoCompletePrompt = AutoCompletePrompt;

	}, '1.0', { requires: ['node', 'plugin'] });
	</script>
	</head>
	<body class="yui3-skin-sam">
	<button id="changePrompt">Change Prompt</button>
	<form>
	<input type="text" id="location" value="" />
	</form>

	<script type="text/javascript" charset="utf-8">
	YUI({ filter: 'raw'}).use('autocomplete', 'autocomplete-prompt','autocomplete-highlighters', function (Y) {

	// Plugin to all AutoCompleteLists, with a custom configuration
	Y.Base.plug(Y.AutoCompleteList, {fn:Y.Plugin.AutoCompletePrompt, cfg:{text:"Booyah!"}});

	var location = Y.one('#location');

	location.plug(Y.Plugin.AutoComplete, {
	resultTextLocator: function (r) { return r.name + ', ' + r.adminCode1; },
	resultHighlighter: 'phraseMatch',
	source: "use 'http://illanti.com/yql/geonames.autocomplete.city.xml' as cities; select * from cities where query = '{query}';"
	});

	Y.one("#changePrompt").on("click", function() {
	location.ac.prompt.set("text", "FooBar!");
	});
	});
	</script>
	</body>
	</html>