gistfile1.js

dojo.provide('myProject.Callouts');

dojo.require('dijit._Widget');
dojo.require('myProject.Services');

dojo.declare('myProject.Callouts', dijit._Widget, {
	cache : {},
	
	services : new myProject.Services(),
	
	noResults : dojo.create('li', { innerHTML : 'No Results Found' }),
	
	postCreate : function() {
		this.choices = dojo.create('ul', { id : 'callouts_list' });
		dojo.place(this.choices, this.domNode, 'after');

		this.selected = dojo.create('ul', { id : 'callouts_selected' });
		dojo.place(this.selected, this.domNode, 'after');
		
		this.connect(this.choices, 'onclick', '_handleSelection');
		
		this.connect(this.domNode, 'onkeyup', '_doLookup');
		this.connect(this.domNode, 'onblur', '_hideChoices');
	},
	
	_hideChoices : function() {
		setTimeout(dojo.hitch(this, function() {
			dojo.removeClass(this.choices, 'visible');
		}), 300);
	},
	
	_handleSelection : function(e) {
		if (dojo.query(e.target).filter('li').length) {
			var calloutId = dojo.attr(e.target, 'id'),

				type = calloutId.split('_')[0],

				li = dojo.create('li', {
					innerHTML : e.target.innerHTML,
					'class' : type
				}),

				input = dojo.create('input', {
					name : 'callouts[]',
					type : 'hidden',
					value : calloutId
				}),
				
				span = dojo.create('span', {
					innerHTML : 'remove'
				});

			dojo.connect(span, 'onclick', function() {
				dojo.destroy(li);
				dojo.destroy(input);
			});

			dojo.place(span, li, 'last');
			
			dojo.place(li, this.selected, 'last');
			dojo.place(input, this.domNode, 'after');			
		} 
	},
	
	_doLookup : function() {
		this.timeout && clearTimeout(this.timeout);
		this.timeout = setTimeout(dojo.hitch(this, '_realLookup'), 300);
	},
	
	_realLookup : function() {
		var val = this.domNode.value;
		
		if (val.length > 2) {
			dojo.addClass(this.domNode, 'loading');
			if (this.cache[val]) {
				this._handleResult(this.cache[val]);
			} else {
				var c = this.services.json.callouts({'callouts' : val});
				
				c.addCallback(dojo.hitch(this, function(resp) {
					this.cache[val] = resp;
				}));
				
				c.addCallback(dojo.hitch(this, '_handleResult'));
			}
		} else {
			this._hideChoices();
		}
	},
	
	_handleResult : function(resp) {
		dojo.removeClass(this.domNode, 'loading');
		dojo.addClass(this.choices, 'visible');
		dojo.empty(this.choices);
		
		if (resp.length) {
			dojo.forEach(resp, dojo.hitch(this, function(item) {
				var c = item.id.split('_')[0],

					li = dojo.create('li', {
						innerHTML : item.name,
						'class' : c,
						id : item.id
					});

				dojo.place(li, this.choices, 'last');
			}));
		} else {
			dojo.place(this.noResults, this.choices, 'only');
		}
	}
});