(function ($) {
$.widget("ui.combobox", {
Version: "1.4",
options: {
SelectOnly:true,//是否只能选择数据源中的
config: {
lableName: "选项",
tdWidth: 80,
showHeader: true
}
},
_create: function () {
var self = this;
this.target = this.element//.css({height:"1.2em",""}),
value = this.target.val() ? this.target.text() : "";
this.wrapper = $("<span>")
.addClass("ui-combobox")
.css("z-index","99")
.appendTo($(this.target).parent())
.append(this.target);
this._createAutocomplete(this.target);
this._createShowAllButton(this.target);
},
_createAutocomplete: function (target) {
this.input=this.element
.appendTo(this.wrapper)
.attr("title", "")
.addClass("ui-state-default ui-combobox-input ui-widget-content ui-corner-left")
.live("keydown", function (event) {
if (target.combobox("option", "multiple")
&& $(this).val().length > 0
&& $(this).val().substr($(this).val().length - 1) != ","
&& event.keyCode!=13)
{
var terms = $(this).val().split(/,\s*/);
var term
if (terms.length > 1 ) {
term = terms.splice(terms.length - 1, 1)[0];
target.autocomplete("search", term);
} event.preventDefault();
}
if (target.combobox("option", "source")) {
target.autocomplete("option", "source", target.combobox("option", "source"))
}
})
.autocomplete({
delay: 0,
minLength: 1,
source: target.combobox("option", "source"),
open: function (event, ui) {
target.autocomplete("option", "minLength", "1");
target.data("ui-autocomplete")._renderItem = function (ul, item) {
$(ul).css("z-index", "99")
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
},
select: function (event, ui) {
if (!target.combobox("option", "multiple")) {
this.value = ui.item.value;
} else {
var terms = this.value.split(/,\s*/);
var count = terms.length;
if (this.value.substr(this.value.length - 1) != ",")
count--;
if (terms[count-1]=="") {
count--;
}
// remove the current input
terms = terms.splice(0, count);
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
if (count == 0) {
this.value = terms[0]+",";
} else {
this.value = terms + ",";
}
// this.value =terms;
}
if (target.combobox("option", "AfterSelect")) {
var afterSelect = target.combobox("option").AfterSelect(event, ui)
// $.proxy(afterSelect, event, ui);
}
return false;
},
focus: function (event, ui) {
if (target.combobox("option", "multiple")) {
return false;
}
}
//option: $.proxy(this, "_option")
})
this._on(this.target, {
autocompletechange: "_removeIfInvalid"
});
},
AfterSelect: function () {
},
_removeIfInvalid:function( event, ui ) {
// Selected an item, nothing to do
if ( ui.item ) {
return;
}
// Search for a match (case-insensitive)
var value = this.target.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
var source = this.target.autocomplete("option", "source");
if (!source) {
this.target.click();
source = this.target.autocomplete("option", "source");
}
for (var i = 0; i < source.length; i++) {
if (source[i].value.toLowerCase() === valueLowerCase)
valid = true;
}
// Found a match, nothing to do
if (valid && this.target.combobox("option", "SelectOnly")) {
return;
}
// Remove invalid value
this.target.tooltip();
this.target
.val( "" )
.attr( "title", value + "不是可選項!請重新輸入!" )
.tooltip( "open" );
this.target.val("");
this._delay(function() {
this.target.tooltip("close").attr("title", "");
}, 2500 );
this.target.data("ui-autocomplete").term = "";
this.target.focus();
},
_createShowAllButton: function (target) {
$("<a>")
.attr("tabIndex", -1)
//.attr("title", "Show All Items")
//.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.mousedown(function () {
// wasOpen = input.autocomplete("widget").is(":visible");
})
.click($.proxy(this._click,this));
},
_click: function () {
var lableName = this.target.combobox("option", "config").lableName;
var showHeader = this.target.combobox("option", "config").showHeader;
var tdWidth = this.target.combobox("option", "config").tdWidth;
this.target.focus();
// Close if already visible
if (this.target.combobox("option", "source")) {
this.target.autocomplete("option", "source", this.target.combobox("option", "source"))
}
this.target.autocomplete("option", "minLength", "0");
// Pass empty string as value to search for, displaying all results
var targetWidth = parseInt(this.target.parent().width());
this.target.data("ui-autocomplete")._renderItem = function (ul, item) {
var str = decodeURIComponent($.param(item));
var list = str.split("&");
var tab_width = ((list.length - 1) * tdWidth);
if (list.length==2) {
tab_width = targetWidth+"px";
} else {
tab_width = tab_width + "px";
}
if ($(ul).html() == "" && showHeader) {
var li = "<li><table class='ui-combobox-table' style='margin-left:4px;width:" + tab_width + "' ><tr>";
var width = parseInt(100 / (list.length-1));
for (var i = 0; i < list.length; i++) {
var text = list[i].split("=");
var name = text[0];
var value = text[1] == "" ? " " : text[1];
if (name != "value") {
li = li + "<td style='width:" + width + "%;padding-left:0.4em' name=" + name + ">" + (name == "label" ? lableName : name) + "</td>";
}
}
li = li + "</tr></table></li>";
$(li).appendTo(ul);
}
var li = "<li><a><table class='ui-combobox-table' style='width:" + tab_width + "' ><tr>";
var width = parseInt(100 / (list.length-1));
for (var i = 0; i < list.length; i++) {
var text = list[i].split("=");
var name = text[0];
var value = text[1] == "" ? " " : text[1];
if (name != "value") {
li = li + "<td style='width:" + width + "%;' name=" + name + ">" + value + "</td>";
}
}
li = li + "</tr></table></a></li>";
$(ul).css({ "z-index": "99" })
return $(li)
.appendTo(ul);
}
this.target.autocomplete("search", "");
},
_setOptions: function () {
// _super and _superApply handle keeping the right this-context
this._superApply(arguments);
},
_setOption: function (optionName, value) {
if (optionName == "source") {
this.input.autocomplete("option", optionName, value);
} else {
if (jQuery.isPlainObject(value)) {
var empty = {}
jQuery.extend(empty, this.target.combobox("option", optionName), value);
this._super(optionName, empty);
} else {
this._super(optionName, value);
}
}
}
});
})(jQuery);
自己写的也没有什么规范