title: autocomplete with multiselect outside div
body: <p>I am trying to do something  autocomplete with multiselect. fro that I am using <a href="http://harvesthq.github.io/chosen/" rel="nofollow">http://harvesthq.github.io/chosen/</a> .. this is awesome plugins but I need something little bit different way output...</p>
  
  <p>1st I need to show selected item in one separate div. currently it show on text box. 2nd I want to add option <strong>Select All</strong> and <strong>Clear All</strong>. I saw how they added search option in there. in there js file they did</p>
  
  <p><code>this.container.html('&lt;a class="chosen-single chosen-default" tabindex="-1"&gt;&lt;span&gt;' + this.default_text + '&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chosen-drop"&gt;&lt;div class="chosen-search"&gt;&lt;input type="text" autocomplete="off" /&gt;&lt;/div&gt;&lt;ul class="chosen-results"&gt;&lt;/ul&gt;&lt;/div&gt;')</code></p>
  
  <p>So I think if we can add one div with two button Select all and Clear all then if we can put function there for select all and clear then that will be work. also when I select all and clear all then it will effect on outside div too where I want to show all select list.</p>
  
  <p>below is code </p>
  
  <pre><code> &lt;select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option&gt;American Black Bear&lt;/option&gt;
          &lt;option&gt;Asiatic Black Bear&lt;/option&gt;
          &lt;option&gt;Brown Bear&lt;/option&gt;
          &lt;option&gt;Giant Panda&lt;/option&gt;
          &lt;option&gt;Sloth Bear&lt;/option&gt;
          &lt;option&gt;Sun Bear&lt;/option&gt;
          &lt;option&gt;Polar Bear&lt;/option&gt;
          &lt;option&gt;Spectacled Bear&lt;/option&gt;
        &lt;/select&gt;
  </code></pre>
  
  selected list bellow
  
  <p>JS</p>
  
  <pre><code> var config = {
  
    '.chosen-select-width'     : {width:"75%"}
  }
  for (var selector in config) {
    $(selector).chosen(config[selector]);
  }
  </code></pre>
  
  <p>Demo <a href="http://jsfiddle.net/Gqmhs/" rel="nofollow">http://jsfiddle.net/Gqmhs/</a></p>
  
  <p>Chosen document file url <a href="http://harvesthq.github.io/chosen/options.html" rel="nofollow">http://harvesthq.github.io/chosen/options.html</a></p>