flexselect相应onchange事件
jquery.flexselect.js
?
?
/*
?* flexselect: a jQuery plugin, version: 0.2 (2009-03-16)
?* @requires jQuery v1.3 or later
?* Download by http://www.codefans.net
?* FlexSelect is a jQuery plugin that makes it easy to convert a select box into
?* a Quicksilver-style, autocompleting, flex matching selection tool.
?*
?* For usage and examples, visit:
?* http://rmm5t.github.com/jquery-flexselect/
?*
?* Licensed under the MIT:
?* http://www.opensource.org/licenses/mit-license.php
?*
?* Copyright (c) 2009, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
?*/
(function($) {
? $.flexselect = function(select, options) { this.init(select, options); };
? $.extend($.flexselect.prototype, {
??? settings: {
????? allowMismatch: false,
????? selectedClass: "flexselect_selected",
????? dropdownClass: "flexselect_dropdown",
????? inputIdTransform:??? function(id)?? { return id + "_flexselect"; },
????? inputNameTransform:? function(name) { return; },
????? dropdownIdTransform: function(id)?? { return id + "_flexselect_dropdown"; }
??? },
??? select: null,
??? input: null,
??? hidden: null,
??? dropdown: null,
??? dropdownList: null,
??? cache: [],
??? results: [],
??? lastAbbreviation: null,
??? abbreviationBeforeFocus: null,
??? selectedIndex: 0,
??? picked: false,
??? dropdownMouseover: false, // Workaround for poor IE behaviors
??? init: function(select, options) {
????? $.extend(this.settings, options);
????? this.select = $(select);
????? this.preloadCache();
????? this.renderControls();
????? this.wire();
??? },
??? preloadCache: function() {
????? this.cache = this.select.children("option").map(function() {
??????? return { name: $.trim($(this).text()), value: $(this).val(), score: 0.0 };
????? });
??? },
??? renderControls: function() {
????? var selected = this.select.children("option:selected");
????? this.hidden = $("<input type='text'/>").attr({
??????? id: this.select.attr("id"),
??????? name: this.select.attr("name")
????? }).val(selected.val());
????? this.input = $("<input type='text' autocomplete='off' />").attr({
??????? id: this.settings.inputIdTransform(this.select.attr("id")),
??????? name: this.settings.inputNameTransform(this.select.attr("name")),
??????? accesskey: this.select.attr("accesskey"),
??????? tabindex: this.select.attr("tabindex"),
??????? style: this.select.attr("style")
????? }).addClass(this.select.attr("class")).val($.trim(selected.text()));
????? this.dropdown = $("<div></div>").attr({
??????? id: this.settings.dropdownIdTransform(this.select.attr("id"))
????? }).addClass(this.settings.dropdownClass);
????? this.dropdownList = $("<ul></ul>");
????? this.dropdown.append(this.dropdownList);
????? this.select.after(this.input).after(this.hidden).remove();
????? $("body").append(this.dropdown);
??? },
??? wire: function() {
????? var self = this;
????? this.input.click(function() {
??????? self.lastAbbreviation = null;
??????? self.focus();
????? });
????? this.input.mouseup(function(event) {
??????? // This is so Safari selection actually occurs.
??????? event.preventDefault();
????? });
????? this.input.focus(function() {
??????? self.abbreviationBeforeFocus = self.input.val();
??????? self.input.select();
??????? if (!self.picked) self.filterResults();
????? });
????? this.input.blur(function() {
??????? if (!self.dropdownMouseover) {
????????? self.hide();
????????? if (!self.picked) self.reset();
??????? }
????? });
????? this.dropdownList.mouseover(function (event) {
??????? if (event.target.tagName == "LI") {
????????? var rows = self.dropdown.find("li");
????????? self.markSelected(rows.index($(event.target)));
??????? }
????? });
????? this.dropdownList.mouseleave(function () {
??????? self.markSelected(-1);
????? });
????? this.dropdownList.mouseup(function (event) {
??????? self.pickSelected();
??????? self.focusAndHide();
????? });
????? this.dropdown.mouseover(function (event) {
??????? self.dropdownMouseover = true;
????? });
????? this.dropdown.mouseleave(function (event) {
??????? self.dropdownMouseover = false;
????? });
????? this.dropdown.mousedown(function (event) {
??????? event.preventDefault();
????? });
????? this.input.keyup(function(event) {
??????? switch (event.keyCode) {
????????? case 13: // return
??????????? event.preventDefault();
??????????? self.pickSelected();
??????????? self.focusAndHide();
??????????? break;
????????? case 27: // esc
??????????? event.preventDefault();
??????????? self.reset();
??????????? self.focusAndHide();
??????????? break;
????????? default:
??????????? self.filterResults();
??????????? break;
??????? }
????? });
????? this.input.keydown(function(event) {
??????? switch (event.keyCode) {
????????? case 9:? // tab
??????????? self.pickSelected();
??????????? self.hide();
??????????? break;
????????? case 33: // pgup
??????????? event.preventDefault();
??????????? self.markFirst();
??????????? break;
????????? case 34: // pgedown
??????????? event.preventDefault();
??????????? self.markLast();
??????????? break;
????????? case 38: // up
??????????? event.preventDefault();
??????????? self.moveSelected(-1);
??????????? break;
????????? case 40: // down
??????????? event.preventDefault();
??????????? self.moveSelected(1);
??????????? break;
????????? case 13: // return
????????? case 27: // esc
??????????? event.preventDefault();
??????????? event.stopPropagation();
??????????? break;
??????? }
????? });
??? },
??? filterResults: function() {
????? var abbreviation = this.input.val();
????? if (abbreviation == this.lastAbbreviation) return;
????? var results = [];
????? $.each(this.cache, function() {
??????? this.score = LiquidMetal.score(this.name, abbreviation);
??????? if (this.score > 0.0) results.push(this);
????? });
????? this.results = results;
????? this.sortResults();
????? this.renderDropdown();
????? this.markFirst();
????? this.lastAbbreviation = abbreviation;
????? this.picked = false;
??? },
??? sortResults: function() {
????? this.results.sort(function(a, b) { return b.score - a.score; });
??? },
??? renderDropdown: function() {
????? var dropdownBorderWidth = this.dropdown.outerWidth() - this.dropdown.innerWidth();
????? var inputOffset = this.input.offset();
????? this.dropdown.css({
??????? width: (this.input.outerWidth() - dropdownBorderWidth) + "px",
??????? top: (inputOffset.top + this.input.outerHeight()) + "px",
??????? left: inputOffset.left + "px"
????? });
????? var list = this.dropdownList.html("");
????? $.each(this.results, function() {
??????? // list.append($("<li/>").html(this.name + " <small>[" + Math.round(this.score*100)/100 + "]</small>"));
??????? list.append($("<li/>").html(this.name));
????? });
????? this.dropdown.show();
??? },
??? markSelected: function(n) {
????? if (n > this.results.length) return;
????? var rows = this.dropdown.find("li");
????? rows.removeClass(this.settings.selectedClass);
????? this.selectedIndex = n;
????? if (n >= 0) $(rows[n]).addClass(this.settings.selectedClass);
??? },
??? pickSelected: function() {
????? var selected = this.results[this.selectedIndex];
????? if (selected) {
??????? this.input.val(selected.name);
??????? this.hidden.val(selected.value);
??///document.getElementById("module").value=selected.value;
??????? this.picked = true;
????? } else if (this.settings.allowMismatch) {
??????? this.hidden.val("");
????? } else {
?? // changeModule();
??????? this.reset();
????? }
?? //执行onchange方法
?? doonchange();
??? },
??? hide: function() {
????? this.dropdown.hide();
????? this.lastAbbreviation = null;
??? },
??? moveSelected: function(n) { this.markSelected(this.selectedIndex+n); },
??? markFirst:??? function()? { this.markSelected(0); },
??? markLast:???? function()? { this.markSelected(this.results.length - 1); },
??? reset:??????? function()? { this.input.val(this.abbreviationBeforeFocus); },
??? focus:??????? function()? { this.input.focus(); },
??? focusAndHide: function()? { this.focus(); this.hide(); }
? });
? $.fn.flexselect = function(options) {
??? this.each(function() {
????? if (this.tagName == "SELECT") new $.flexselect(this, options);
??? });
??? return this;
? };
})(jQuery);
