title: Set default values for jQuery UI Autocomplete with multi selection
body: <p>I am trying to use the jQuery UI Autocomplete multiselect to edit a category (one of 200 categories to be accurate).
  The high number of possible categories is why I would like to use the autoselect feature of the jQuery UI. However, I could not figure out how to set the predefined categories.</p>
  
  <p>Look at the Autocomplete multiselect Input in this fiddle:
  <a href="http://jsfiddle.net/sgxKJ/" rel="nofollow">http://jsfiddle.net/sgxKJ/</a></p>
  
  <p>It does what I want to do. But I like to find a way to pre define one or two elements (Say "Java" and "AppleScript" in the example) while loading the page.
  How can I do that in a Java Script of the page?
  Would it be possible to do this in the same ".autocomplete({" function that does already exist?</p>
  
  <p>As css I use:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="autocomplete/css/ui-lightness/jquery-ui-1.10.0.custom.css"&gt;
  </code></pre>
  
  <p>I also use the following css:</p>
  
  <pre><code>@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 &gt; 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;
  }
  </code></pre>
  
  <p>As Input I use this in the HTML part:</p>
  
  <pre><code>&lt;input id="AutoMultiSelect" class="vanilla" type="text" value="" size="40" /&gt;
  </code></pre>
  
  <p>The jQuery Versions I use are:</p>
  
  <pre><code>&lt;script type="text/javascript" src="autocomplete/js/jquery-1.9.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And the following script is used at the end of the body part of my html file:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (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 = $("&lt;div&gt;&lt;/div&gt;")
                      .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 === "") &amp;&amp; (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) {
                      $("&lt;div&gt;&lt;/div&gt;")
                          .addClass("ui-autocomplete-multiselect-item")
                          .text(ui.item.label)
                          .append(
                              $("&lt;span&gt;&lt;/span&gt;")
                                  .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"
  ];
  &lt;/script&gt;
  
  &lt;script&gt;
      $( "#AutoMultiSelect" ).autocomplete({
          source: availableTags,
          multiselect: true
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>P.S. I am a newbie here and have tried all the answers in stackoverflow I could find. However, none seemed to work with the code above.</p>