title: Select mutiple options from jquery autocomplete with checkboxes
body: <p>I am working with <a href="https://jqueryui.com/autocomplete/" rel="nofollow noreferrer">jquery autocomplete</a> .</p>
  
  <p>I am trying following code</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;textarea class="search-element"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>var data = [
                 "ActionScript",
                 "AppleScript",
                 "Asp",
                 "BASIC",
                 "C++",
                 "Clojure",
                 "COBOL",
                 "ColdFusion"
          ];
          $(function () {
              var $this;
              var singleSelectOptions = {
                  source: function (request, response) {
                     response($.map(data, function (item) {
                        return {
                          label: item,
                        }
                     }));
                  },
                  select: function (event, ui) {
                     $($this).autocomplete("close");
                     $($this).val($($this).val() + '\n' + ui.label)
                   },
                   minLength: 0,
                   open: function () {
                      $("ul.ui-menu").width($(this).innerWidth());
                   }
              }
              $(document).find('textarea[class*="search-element"]').live('keydown', function () {
                  $($this).autocomplete(singleSelectOptions);
              }).live('focus', function () {
                  $this = $(this);
                  var text = $this.val();
                  if (text == '') {
                      $($this).autocomplete(singleSelectOptions);
                      $($this).autocomplete("search");
                  }
            });
          })
  </code></pre>
  
  <p>By using this code I can select only one option at a time
  but i need to select multiple options using checkbox</p>
  
  <p>Right now my result is showing like this</p>
  
  <p><a href="https://i.stack.imgur.com/QwlKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QwlKm.png" alt="enter image description here"></a></p>
  
  <p>But I want result as follows and when we check box then autocomplete should not be close and selected options should be fill in related textarea with comma separation and when we uncheck checkbox then that option should be remove from textarea.  And I can update text of textarea.</p>
  
  <p><a href="https://i.stack.imgur.com/3FDvy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3FDvy.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/32Bck/354/" rel="nofollow noreferrer"><strong>Here is my fiddle</strong></a></p>