我正在尝试使用 jQuery UI 自动完成多选来编辑一个类别（准确地说是 200 个类别之一）。大量可能的类别是我想使用 jQuery UI 的自动选择功能的原因。但是，我不知道如何设置预定义的类别。
看看这个小提琴中的自动完成多选输入：http: //jsfiddle.net/sgxKJ/
它做我想做的事。但我喜欢在加载页面时找到一种方法来预定义一个或两个元素（例如示例中的“Java”和“AppleScript”）。如何在页面的 Java 脚本中做到这一点？是否可以在已经存在的同一个“.autocomplete（{”函数）中执行此操作？
作为 css 我使用：
<link rel="stylesheet" type="text/css" href="autocomplete/css/ui-lightness/jquery-ui-1.10.0.custom.css">
我还使用以下CSS：
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
body, html {
font-family: Calibri,Verdana,Arial,sans-serif;
border: 0;
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
font-family: Ubuntu;
line-height: 1.5;
margin-bottom: .5em;
}
h1 {
font-size: 2em;
}
h1.has-sub {
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
}
ul {
list-style: disc;
margin-left: 1.5em;
margin-top: .5em;
margin-bottom: .5em;
line-height: 1.4;
}
p {
line-height: 1.4;
margin-bottom: .5em;
}
p.hint {
font-style: italic;
font-size: .8em;
line-height: 1.5;
color: #555;
}
p.hint:before {
content: "Hint: "
}
header {
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 1%, rgba(63,63,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(76,76,76,1)), color-stop(100%,rgba(63,63,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* W3C */
padding: .2em 1.2em;
font-family: Ubuntu;
font-size: 1.3em;
color: #999;
text-shadow: -1px -1px 0 #333;
text-align: right;
box-shadow: 0 0 50px 20px rgba(0,0,0,.1);
border-bottom: 1px solid #fff;
}
header span {
margin-left: .3em;
font-size: .6em;
}
article {
padding: 20px;
}
label {
vertical-align: top;
line-height: 1.7;
}
.columns {
padding: 2em;
-webkit-column-count: 3;
-webkit-column-gap: 5em;
-webkit-column-rule: 1px dashed #ccc;
column-count: 2;
column-rule: 1px dashed #ccc;
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #f1f1f1;
}
.columns > h2 {
-webkit-column-break-before: always;
}
#header {
height: 10px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 1%, rgba(63,63,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(76,76,76,1)), color-stop(100%,rgba(63,63,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* W3C */
}
#body {
padding: 20px;
}
input.vanilla,
.ui-autocomplete-multiselect.ui-state-default {
display: block;
background: #fff;
border: 1px solid #ccc;
padding: 3px 3px;
padding-bottom: 0px;
overflow: hidden;
cursor: text;
}
input.vanilla {
line-height: 1.7;
padding: 2px 5px;
}
.ui-autocomplete-multiselect .ui-autocomplete-multiselect-item .ui-icon {
float: right;
cursor: pointer;
}
.ui-autocomplete-multiselect .ui-autocomplete-multiselect-item {
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1px 3px;
margin-right: 2px;
margin-bottom: 3px;
color: #333;
background-color: #f6f6f6;
}
.ui-autocomplete-multiselect input {
display: inline-block;
border: none;
outline: none;
height: auto;
margin: 2px;
overflow: visible;
margin-bottom: 5px;
text-align: left;
}
input.vanilla:focus,
.ui-autocomplete-multiselect.ui-state-active {
outline: none;
border: 1px solid #7ea4c7;
-moz-box-shadow: 0 0 5px rgba(50,150,255,0.5);
-webkit-box-shadow: 0 0 5px rgba(50,150,255,0.5);
-khtml-box-shadow: 0 0 5px rgba(50,150,255,0.5);
box-shadow: 0 0 5px rgba(50,150,255,0.5);
}
.ui-autocomplete {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
作为输入，我在 HTML 部分使用它：
<input id="AutoMultiSelect" class="vanilla" type="text" value="" size="40" />
我使用的 jQuery 版本是：
<script type="text/javascript" src="autocomplete/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
以下脚本用于我的 html 文件正文部分的末尾：
<script type="text/javascript">
(function($, undefined) {
if (typeof $.uix !== "object") { $.uix = {}; }
var ac = $.ui.autocomplete.prototype;
var _super = {
_create: ac._create,
_destroy: ac._destroy,
_resizeMenu: ac._resizeMenu,
_suggest: ac._suggest,
search: ac.search,
open: ac.open,
close: ac.close
};
ac = $.extend({}, ac, {
options: $.extend({}, ac.options, {
multiselect: false,
triggerChar: false
}),
_create: function(){
var self = this,
o = self.options;
_super._create.apply(self);
if (o.multiselect) {
self.selectedItems = { };
self.multiselect = $("<div></div>")
.addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
.css("width", self.element.width())
.insertBefore(self.element)
.append(self.element)
.bind("click.autocomplete", function(){
self.element.focus();
});
var fontSize = parseInt(self.element.css("fontSize"), 10);
function autoSize(e){
// Hackish autosizing
var $this = $(this);
$this.width(1).width(this.scrollWidth+fontSize-1);
};
var kc = $.ui.keyCode;
self.element.bind({
"keydown.autocomplete": function(e){
if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
var prev = self.element.prev();
delete self.selectedItems[prev.text()];
prev.remove();
}
},
// TODO: Implement outline of container
"focus.autocomplete blur.autocomplete": function(){
self.multiselect.toggleClass("ui-state-active");
},
"keypress.autocomplete change.autocomplete focus.autocomplete blur.autocomplete": autoSize
}).trigger("change");
// TODO: There's a better way?
o.select = o.select || function(e, ui) {
$("<div></div>")
.addClass("ui-autocomplete-multiselect-item")
.text(ui.item.label)
.append(
$("<span></span>")
.addClass("ui-icon ui-icon-close")
.click(function(){
var item = $(this).parent();
delete self.selectedItems[item.text()];
item.remove();
})
)
.insertBefore(self.element);
self.selectedItems[ui.item.label] = ui.item;
self._value("");
return false;
}
}
return this;
},
_resizeMenu: function(){
if (this.options.multiselect) {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.multiselect.outerWidth()
) );
} else {
_super._resizeMenu.apply(this);
}
},
_suggest: function( items ) {
var elm = this.element;
// Override this.element with our multiselect for proper positioning
this.element = this.options.multiselect ? this.multiselect : this.element;
_super._suggest.apply(this, [items]);
this.element = elm;
},
search: function( value, event ) {
value = value != null ? value : this._value();
if (this.options.triggerChar) {
if (value.substring(0,1) != this.options.triggerChar) {
return;
} else {
value = value.substring(1);
}
}
return _super.search.apply(this, [value, event]);
},
// Borrowed from 1.9
_value: function( value ) {
return this.valueMethod.apply( this.element, arguments );
},
// Borrowed from 1.9
valueMethod: function() {
var result = this[this.is( "input" ) ? "val" : "text"].apply(this, arguments);
this.trigger("change");
return result;
}
});
$.uix.autocomplete = ac;
$.widget("uix.autocomplete", $.uix.autocomplete);
})(jQuery);
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
</script>
<script>
$( "#AutoMultiSelect" ).autocomplete({
source: availableTags,
multiselect: true
});
</script>
PS我是这里的新手，已经尝试了我能找到的stackoverflow中的所有答案。但是，似乎没有一个适用于上面的代码。