combobox.js

初学者

/*
	Copyright (c) 2004-2006, The Dojo Foundation
	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the
	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml
*/



dojo.provide("dojo.widget.ComboBox");
dojo.require("dojo.widget.*");
dojo.require("dojo.event.*");
dojo.require("dojo.io.*");
dojo.require("dojo.html.*");
dojo.require("dojo.string");
dojo.require("dojo.widget.html.stabile");
dojo.require("dojo.widget.PopupContainer");
dojo.declare("dojo.widget.incrementalComboBoxDataProvider", null, function (options) {
	this.searchUrl = options.dataUrl;
	this._cache = {};
	this._inFlight = false;
	this._lastRequest = null;
	this.allowCache = false;
}, {_addToCache:function (keyword, data) {
	if (this.allowCache) {
		this._cache[keyword] = data;
	}
}, startSearch:function (searchStr, callback) {
	if (this._inFlight) {
	}
	var tss = encodeURIComponent(searchStr);
	var realUrl = dojo.string.substituteParams(this.searchUrl, {"searchString":tss});
	var _this = this;
	var request = this._lastRequest = dojo.io.bind({url:realUrl, method:"get", mimetype:"text/json", load:function (type, data, evt) {
		_this._inFlight = false;
		if (!dojo.lang.isArray(data)) {
			var arrData = [];
			for (var key in data) {
				arrData.push([data[key], key]);
			}
			data = arrData;
		}
		_this._addToCache(searchStr, data);
		if (request == _this._lastRequest) {
			callback(data);
		}
	}});
	this._inFlight = true;
}});
dojo.declare("dojo.widget.basicComboBoxDataProvider", null, function (options, node) {
	this._data = [];
	this.searchLimit = 30;
	this.searchType = "STARTSTRING";
	this.caseSensitive = false;
	if (!dj_undef("dataUrl", options) && !dojo.string.isBlank(options.dataUrl)) {
		this._getData(options.dataUrl);
	} else {
		if ((node) && (node.nodeName.toLowerCase() == "select")) {
			var opts = node.getElementsByTagName("option");
			var ol = opts.length;
			var data = [];
			for (var x = 0; x < ol; x++) {
				var text = opts[x].textContent || opts[x].innerText || opts[x].innerHTML;
				var keyValArr = [String(text), String(opts[x].value)];
				data.push(keyValArr);
				if (opts[x].selected) {
					options.setAllValues(keyValArr[0], keyValArr[1]);
				}
			}
			this.setData(data);
		}
	}
}, {_getData:function (url) {
	dojo.io.bind({url:url, load:dojo.lang.hitch(this, function (type, data, evt) {
		if (!dojo.lang.isArray(data)) {
			var arrData = [];
			for (var key in data) {
				arrData.push([data[key], key]);
			}
			data = arrData;
		}
		this.setData(data);
	}), mimetype:"text/json"});
}, startSearch:function (searchStr, callback) {
	this._performSearch(searchStr, callback);
}, _performSearch:function (searchStr, callback) {
	var st = this.searchType;
	var ret = [];
	if (!this.caseSensitive) {
		searchStr = searchStr.toLowerCase();
	}
	for (var x = 0; x < this._data.length; x++) {
		if ((this.searchLimit > 0) && (ret.length >= this.searchLimit)) {
			break;
		}
		var dataLabel = new String((!this.caseSensitive) ? this._data[x][0].toLowerCase() : this._data[x][0]);
		if (dataLabel.length < searchStr.length) {
			continue;
		}
		if (st == "STARTSTRING") {
			if (searchStr == dataLabel.substr(0, searchStr.length)) {
				ret.push(this._data[x]);
			}
		} else {
			if (st == "SUBSTRING") {
				if (dataLabel.indexOf(searchStr) >= 0) {
					ret.push(this._data[x]);
				}
			} else {
				if (st == "STARTWORD") {
					var idx = dataLabel.indexOf(searchStr);
					if (idx == 0) {
						ret.push(this._data[x]);
					}
					if (idx <= 0) {
						continue;
					}
					var matches = false;
					while (idx != -1) {
						if (" ,/(".indexOf(dataLabel.charAt(idx - 1)) != -1) {
							matches = true;
							break;
						}
						idx = dataLabel.indexOf(searchStr, idx + 1);
					}
					if (!matches) {
						continue;
					} else {
						ret.push(this._data[x]);
					}
				}
			}
		}
	}
	callback(ret);
}, setData:function (pdata) {
	this._data = pdata;
}});
dojo.widget.defineWidget("dojo.widget.ComboBox", dojo.widget.HtmlWidget, {forceValidOption:false, searchType:"stringstart", dataProvider:null, autoComplete:true, searchDelay:100, dataUrl:"", fadeTime:200, maxListLength:8, mode:"local", selectedResult:null, dataProviderClass:"", buttonSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/combo_box_arrow.png"), dropdownToggle:"fade", templateString:"<span _=\"whitespace and CR's between tags adds &nbsp; in FF\"\n\tclass=\"dojoComboBoxOuter\"\n\t><input style=\"display:none\"  tabindex=\"-1\" name=\"\" value=\"\" \n\t\tdojoAttachPoint=\"comboBoxValue\"\n\t><input style=\"display:none\"  tabindex=\"-1\" name=\"\" value=\"\" \n\t\tdojoAttachPoint=\"comboBoxSelectionValue\"\n\t><input type=\"text\" autocomplete=\"off\" class=\"dojoComboBox\"\n\t\tdojoAttachEvent=\"key:_handleKeyEvents; keyUp: onKeyUp; compositionEnd; onResize;\"\n\t\tdojoAttachPoint=\"textInputNode\"\n\t><img hspace=\"0\"\n\t\tvspace=\"0\"\n\t\tclass=\"dojoComboBox\"\n\t\tdojoAttachPoint=\"downArrowNode\"\n\t\tdojoAttachEvent=\"onMouseUp: handleArrowClick; onResize;\"\n\t\tsrc=\"${this.buttonSrc}\"\n></span>\n", templateCssString:".dojoComboBoxOuter {\n\tborder: 0px !important;\n\tmargin: 0px !important;\n\tpadding: 0px !important;\n\tbackground: transparent !important;\n\twhite-space: nowrap !important;\n}\n\n.dojoComboBox {\n\tborder: 1px inset #afafaf;\n\tmargin: 0px;\n\tpadding: 0px;\n\tvertical-align: middle !important;\n\tfloat: none !important;\n\tposition: static !important;\n\tdisplay: inline !important;\n}\n\n/* the input box */\ninput.dojoComboBox {\n\tborder-right-width: 0px !important; \n\tmargin-right: 0px !important;\n\tpadding-right: 0px !important;\n}\n\n/* the down arrow */\nimg.dojoComboBox {\n\tborder-left-width: 0px !important;\n\tpadding-left: 0px !important;\n\tmargin-left: 0px !important;\n}\n\n/* IE vertical-alignment calculations can be off by +-1 but these margins are collapsed away */\n.dj_ie img.dojoComboBox {\n\tmargin-top: 1px; \n\tmargin-bottom: 1px; \n}\n\n/* the drop down */\n.dojoComboBoxOptions {\n\tfont-family: Verdana, Helvetica, Garamond, sans-serif;\n\t/* font-size: 0.7em; */\n\tbackground-color: white;\n\tborder: 1px solid #afafaf;\n\tposition: absolute;\n\tz-index: 1000; \n\toverflow: auto;\n\tcursor: default;\n}\n\n.dojoComboBoxItem {\n\tpadding-left: 2px;\n\tpadding-top: 2px;\n\tmargin: 0px;\n}\n\n.dojoComboBoxItemEven {\n\tbackground-color: #f4f4f4;\n}\n\n.dojoComboBoxItemOdd {\n\tbackground-color: white;\n}\n\n.dojoComboBoxItemHighlight {\n\tbackground-color: #63709A;\n\tcolor: white;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/ComboBox.css"), setValue:function (value) {
	this.comboBoxValue.value = value;
	if (this.textInputNode.value != value) {
		this.textInputNode.value = value;
		dojo.widget.html.stabile.setState(this.widgetId, this.getState(), true);
		this.onValueChanged(value);
	}
}, onValueChanged:function (value) {
}, getValue:function () {
	return this.comboBoxValue.value;
}, getState:function () {
	return {value:this.getValue()};
}, setState:function (state) {
	this.setValue(state.value);
}, enable:function () {
	this.disabled = false;
	this.textInputNode.removeAttribute("disabled");
}, disable:function () {
	this.disabled = true;
	this.textInputNode.setAttribute("disabled", true);
}, _getCaretPos:function (element) {
	if (dojo.lang.isNumber(element.selectionStart)) {
		return element.selectionStart;
	} else {
		if (dojo.render.html.ie) {
			var tr = document.selection.createRange().duplicate();
			var ntr = element.createTextRange();
			tr.move("character", 0);
			ntr.move("character", 0);
			try {
				ntr.setEndPoint("EndToEnd", tr);
				return String(ntr.text).replace(/\r/g, "").length;
			}
			catch (e) {
				return 0;
			}
		}
	}
}, _setCaretPos:function (element, location) {
	location = parseInt(location);
	this._setSelectedRange(element, location, location);
}, _setSelectedRange:function (element, start, end) {
	if (!end) {
		end = element.value.length;
	}
	if (element.setSelectionRange) {
		element.focus();
		element.setSelectionRange(start, end);
	} else {
		if (element.createTextRange) {
			var range = element.createTextRange();
			with (range) {
				collapse(true);
				moveEnd("character", end);
				moveStart("character", start);
				select();
			}
		} else {
			element.value = element.value;
			element.blur();
			element.focus();
			var dist = parseInt(element.value.length) - end;
			var tchar = String.fromCharCode(37);
			var tcc = tchar.charCodeAt(0);
			for (var x = 0; x < dist; x++) {
				var te = document.createEvent("KeyEvents");
				te.initKeyEvent("keypress", true, true, null, false, false, false, false, tcc, tcc);
				element.dispatchEvent(te);
			}
		}
	}
}, _handleKeyEvents:function (evt) {
	if (evt.ctrlKey || evt.altKey || !evt.key) {
		return;
	}
	this._prev_key_backspace = false;
	this._prev_key_esc = false;
	var k = dojo.event.browser.keys;
	var doSearch = true;
	switch (evt.key) {
	  case k.KEY_DOWN_ARROW:
		if (!this.popupWidget.isShowingNow) {
			this._startSearchFromInput();
		}
		this._highlightNextOption();
		dojo.event.browser.stopEvent(evt);
		return;
	  case k.KEY_UP_ARROW:
		this._highlightPrevOption();
		dojo.event.browser.stopEvent(evt);
		return;
	  case k.KEY_TAB:
		if (!this.autoComplete && this.popupWidget.isShowingNow && this._highlighted_option) {
			dojo.event.browser.stopEvent(evt);
			this._selectOption({"target":this._highlighted_option, "noHide":false});
			this._setSelectedRange(this.textInputNode, this.textInputNode.value.length, null);
		} else {
			this._selectOption();
			return;
		}
		break;
	  case k.KEY_ENTER:
		if (this.popupWidget.isShowingNow) {
			dojo.event.browser.stopEvent(evt);
		}
		if (this.autoComplete) {
			this._selectOption();
			return;
		}
	  case " ":
		if (this.popupWidget.isShowingNow && this._highlighted_option) {
			dojo.event.browser.stopEvent(evt);
			this._selectOption();
			this._hideResultList();
			return;
		}
		break;
	  case k.KEY_ESCAPE:
		this._hideResultList();
		this._prev_key_esc = true;
		return;
	  case k.KEY_BACKSPACE:
		this._prev_key_backspace = true;
		if (!this.textInputNode.value.length) {
			this.setAllValues("", "");
			this._hideResultList();
			doSearch = false;
		}
		break;
	  case k.KEY_RIGHT_ARROW:
	  case k.KEY_LEFT_ARROW:
		doSearch = false;
		break;
	  default:
		if (evt.charCode == 0) {
			doSearch = false;
		}
	}
	if (this.searchTimer) {