combobox.js

dojo-0.3.0-ajax开 源 项 目

		}else if(this._highlighted_option.nextSibling){
			this.focusOptionNode(this._highlighted_option.nextSibling);
		}
		this.scrollIntoView();
	},

	highlightPrevOption: function(){
		if(this._highlighted_option && this._highlighted_option.previousSibling){
			this.focusOptionNode(this._highlighted_option.previousSibling);
		}else{
			this._highlighted_option = null;
			this.hideResultList();
			return;
		}
		this.scrollIntoView();
	},

	itemMouseOver: function(evt){
		this.focusOptionNode(evt.target);
		dojo.html.addClass(this._highlighted_option, "dojoComboBoxItemHighlight");
	},

	itemMouseOut: function(evt){
		this.blurOptionNode();
	},

	fillInTemplate: function(args, frag){
		// FIXME: need to get/assign DOM node names for form participation here.
		this.comboBoxValue.name = this.name;
		this.comboBoxSelectionValue.name = this.name+"_selected";

		// NOTE: this doesn't copy style info inherited from classes;
		// it's just primitive support for direct style setting
		var source = this.getFragNodeRef(frag);
		if ( source.style ){
			// get around opera wich doesnt have cssText, and IE wich bugs on setAttribute 
			if(dojo.lang.isUndefined(source.style.cssText)){ 
				this.domNode.setAttribute("style", source.getAttribute("style")); 
			}else{
				this.domNode.style.cssText = source.style.cssText; 
			}
		}

		// FIXME: add logic
		this.dataProvider = new dojo.widget.ComboBoxDataProvider();

		if(!dojo.string.isBlank(this.dataUrl)){
			if("local" == this.mode){
				var _this = this;
				dojo.io.bind({
					url: this.dataUrl,
					load: function(type, data, evt){ 
						if(type=="load"){
							if(!dojo.lang.isArray(data)){
								var arrData = [];
								for(var key in data){
									arrData.push([data[key], key]);
								}
								data = arrData;
							}
							_this.dataProvider.setData(data);
						}
					},
					mimetype: "text/json"
				});
			}else if("remote" == this.mode){
				this.dataProvider = new dojo.widget.incrementalComboBoxDataProvider(this.dataUrl);
			}
		}else{
			// check to see if we can populate the list from <option> elements
			var node = frag["dojo:"+this.widgetType.toLowerCase()]["nodeRef"];
			if((node)&&(node.nodeName.toLowerCase() == "select")){
				// NOTE: we're not handling <optgroup> here yet
				var opts = node.getElementsByTagName("option");
				var ol = opts.length;
				var data = [];
				for(var x=0; x<ol; x++){
					var keyValArr = [new String(opts[x].innerHTML), new String(opts[x].value)];
					data.push(keyValArr);
					if(opts[x].selected){ 
						this.setValue(keyValArr[0]); 
						this.comboBoxSelectionValue.value = keyValArr[1];
					}
				}
				this.dataProvider.setData(data);
			}
		}

		// Prevent IE bleed-through problem
		this.optionsIframe = new dojo.html.BackgroundIframe(this.optionsListWrapper);
		this.optionsIframe.size([0,0,0,0]);
	},


	focus: function(){
		// summary
		//	set focus to input node from code
		this.tryFocus();
	},

	openResultList: function(results){
		this.clearResultList();
		if(!results.length){
			this.hideResultList();
		}

		if(	(this.autoComplete)&&
			(results.length)&&
			(!this._prev_key_backspace)&&
			(this.textInputNode.value.length > 0)){
			var cpos = this.getCaretPos(this.textInputNode);
			// only try to extend if we added the last charachter at the end of the input
			if((cpos+1) > this.textInputNode.value.length){
				// only add to input node as we would overwrite Capitalisation of chars
				this.textInputNode.value += results[0][0].substr(cpos);
				// build a new range that has the distance from the earlier
				// caret position to the end of the first string selected
				this.setSelectedRange(this.textInputNode, cpos, this.textInputNode.value.length);
			}
		}

		var even = true;
		while(results.length){
			var tr = results.shift();
			if(tr){
				var td = document.createElement("div");
				td.appendChild(document.createTextNode(tr[0]));
				td.setAttribute("resultName", tr[0]);
				td.setAttribute("resultValue", tr[1]);
				td.className = "dojoComboBoxItem "+((even) ? "dojoComboBoxItemEven" : "dojoComboBoxItemOdd");
				even = (!even);
				this.optionsListNode.appendChild(td);
				dojo.event.connect(td, "onmouseover", this, "itemMouseOver");
				dojo.event.connect(td, "onmouseout", this, "itemMouseOut");
			}
		}

		// show our list (only if we have content, else nothing)
		this.showResultList();
	},

	onFocusInput: function(){
		this._hasFocus = true;
	},

	onBlurInput: function(){
		this._hasFocus = false;
		this._handleBlurTimer(true, 100);
	},

	// collect all blur timers issues here
	_handleBlurTimer: function(/*Boolean*/clear, /*Number*/ millisec){
		if(this.blurTimer && (clear || millisec)){
			clearTimeout(this.blurTimer);
		}
		if(millisec){ // we ignore that zero is false and never sets as that never happens in this widget
			this.blurTimer = dojo.lang.setTimeout(this, "checkBlurred", millisec);
		}
	},

	// these 2 are needed in IE and Safari as inputTextNode looses focus when scrolling optionslist
	_onMouseOver: function(evt){
		if(!this._mouseover_list){
			this._handleBlurTimer(true, 0);
			this._mouseover_list = true;
		}
	},

	_onMouseOut:function(evt){
		var relTarget = evt.relatedTarget;
		if(!relTarget || relTarget.parentNode!=this.optionsListNode){
			this._mouseover_list = false;
			this._handleBlurTimer(true, 100);
			this.tryFocus();
		}
	},

	checkBlurred: function(){
		if(!this._hasFocus && !this._mouseover_list){
			this.hideResultList();
		}
	},

	sizeBackgroundIframe: function(){
		var w = dojo.style.getOuterWidth(this.optionsListNode);
		var h = dojo.style.getOuterHeight(this.optionsListNode);
		if( w==0 || h==0 ){
			// need more time to calculate size
			dojo.lang.setTimeout(this, "sizeBackgroundIframe", 100);
			return;
		}
		if(this._result_list_open){
			this.optionsIframe.size([0,0,w,h]);
		}
	},

	selectOption: function(evt){
		if(!evt){
			evt = { target: this._highlighted_option };
		}

		if(!dojo.dom.isDescendantOf(evt.target, this.optionsListNode)){
			return;
		}

		var tgt = evt.target;
		while((tgt.nodeType!=1)||(!tgt.getAttribute("resultName"))){
			tgt = tgt.parentNode;
			if(tgt === document.body){
				return false;
			}
		}

		this.textInputNode.value = tgt.getAttribute("resultName");
		this.selectedResult = [tgt.getAttribute("resultName"), tgt.getAttribute("resultValue")];
		this.setValue(tgt.getAttribute("resultName"));
		this.comboBoxSelectionValue.value = tgt.getAttribute("resultValue");
		if(!evt.noHide){
			this.hideResultList();
			this.setSelectedRange(this.textInputNode, 0, null);
		}
		this.tryFocus();
	},

	clearResultList: function(){
		var oln = this.optionsListNode;
		while(oln.firstChild){
			dojo.event.disconnect(oln.firstChild, "onmouseover", this, "itemMouseOver");
			dojo.event.disconnect(oln.firstChild, "onmouseout", this, "itemMouseOut");
			oln.removeChild(oln.firstChild);
		}
	},

	hideResultList: function(){
		if(this._result_list_open){
			this._result_list_open = false;
			this.optionsIframe.size([0,0,0,0]);
			dojo.lfx.fadeHide(this.optionsListNode, 200).play();
		}
	},

	showResultList: function(){
		// Our dear friend IE doesnt take max-height so we need to calculate that on our own every time
		var childs = this.optionsListNode.childNodes;
		if(childs.length){
			var visibleCount = this.maxListLength;
			if(childs.length < visibleCount){
				visibleCount = childs.length;
			}

			with(this.optionsListNode.style){
				display = "";
				height = ((visibleCount) ? (dojo.style.getOuterHeight(childs[0]) * visibleCount) : 0)+"px";
				width = dojo.html.getOuterWidth(this.cbTableNode)+"px";
			}
			// only fadein once (flicker)
			if(!this._result_list_open){
				dojo.html.setOpacity(this.optionsListNode, 0);
				dojo.lfx.fadeIn(this.optionsListNode, 200).play();
			}
			
			// prevent IE bleed through
			this._iframeTimer = dojo.lang.setTimeout(this, "sizeBackgroundIframe", 200);
			this._result_list_open = true;
		}else{
			this.hideResultList();
		}
	},

	handleArrowClick: function(){
		this._handleBlurTimer(true, 0);
		this.tryFocus();
		if(this._result_list_open){
			this.hideResultList();
		}else{
			this.startSearchFromInput();
		}
	},

	tryFocus: function(){
		try {    
			this.textInputNode.focus();
		} catch (e) {
			// element isnt focusable if disabled, or not visible etc - not easy to test for.
 		};
	},
	
	startSearchFromInput: function(){
		this.startSearch(this.textInputNode.value);
	},

	postCreate: function(){
		dojo.event.connect(this, "startSearch", this.dataProvider, "startSearch");
		dojo.event.connect(this.dataProvider, "provideSearchResults", this, "openResultList");
		dojo.event.connect(this.textInputNode, "onblur", this, "onBlurInput");
		dojo.event.connect(this.textInputNode, "onfocus", this, "onFocusInput");

		var s = dojo.widget.html.stabile.getState(this.widgetId);
		if (s) {
			this.setState(s);
		}
	}
});