jquery - 複数選択によるjQueryUIオートコンプリートのデフォルト値の設定

Question

jQuery UIオートコンプリートマルチセレクトを使用してカテゴリを編集しようとしています（正確には200のカテゴリの1つ）。可能なカテゴリの数が多いので、jQueryUIの自動選択機能を使用したいと思います。しかし、事前定義されたカテゴリを設定する方法がわかりませんでした。

このフィドルのオートコンプリートマルチセレクト入力を見てください：http： //jsfiddle.net/sgxKJ/

それは私がやりたいことをします。しかし、ページの読み込み中に1つまたは2つの要素（例では「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ですべての答えを試しました。ただし、上記のコードでは機能するものはないようです。