title: how to add search functionality in multiselect?
body: <p>I have two multiple selects in a page (select-cities &amp; chosen-cities), and I can transfer options to and fro. I have given the search functionality to select-cities list. Everything functions as I need.</p>
  
  <p>I need to add the search functionality for chosen cities list also. Can somebody suggest me how to do that. I tried doing it with the same code but it didn't work. Please suggest the solution. Here is the demo: <a href="http://jsfiddle.net/cs6Xb/130/" rel="nofollow">http://jsfiddle.net/cs6Xb/130/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;input id="someinput"&gt;
  &lt;br/&gt;
  &lt;select class="select-cities" name="city" id="optlist" multiple="multiple"&gt;
      &lt;option&gt;Frederiksberg&lt;/option&gt;
      &lt;option&gt;Vanløse&lt;/option&gt;
      &lt;option&gt;Glostrup&lt;/option&gt;
      &lt;option&gt;Brøndby&lt;/option&gt;
      &lt;option&gt;Roskilde&lt;/option&gt;
      &lt;option&gt;Køge&lt;/option&gt;
      &lt;option&gt;Gentofte&lt;/option&gt;
      &lt;option&gt;Hillerød&lt;/option&gt;
      &lt;option&gt;Tårnby&lt;/option&gt;
      &lt;option&gt;Vallensbæk&lt;/option&gt;
  &lt;/select&gt;
  &lt;/input&gt;
  &lt;br/&gt;
  &lt;input id="someinput1"/&gt;&lt;br/&gt;
  
  &lt;select class="chosen-cities" name="chosen-cities-name" id="optlist1" multiple="multiple"&gt;&lt;/select&gt; 
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(function () {
      opts = $('#optlist option').map(function () {
          return [[this.value, $(this).text()]];
      });
  
  
      $('#someinput').keyup(function () {
  
          var rxp = new RegExp($('#someinput').val(), 'i');
          var optlist = $('#optlist').empty();
          opts.each(function () {
              if (rxp.test(this[1])) {
                  optlist.append($('&lt;option/&gt;').attr('value', this[0]).text(this[1]));
              } else{
                  optlist.append($('&lt;option/&gt;').attr('value', this[0]).text(this[1]).addClass("hidden"));
              }
          });
          $(".hidden").toggleOption(false);
  
      });
      $('.select-cities').click(function () {
          $('.select-cities option:selected').remove().appendTo('.chosen-cities');
          opts = $('#optlist option').map(function () {
              return [[this.value, $(this).text()]];
          });
      });
  
      $('.chosen-cities').click(function () {
          $('.chosen-cities option:selected').remove().appendTo('.select-cities');
          opts = $('#optlist option').map(function () {
              return [[this.value, $(this).text()]];
          });
      });
  
  
  });
  
  jQuery.fn.toggleOption = function( show ) {
      jQuery( this ).toggle( show );
      if( show ) {
          if( jQuery( this ).parent( 'span.toggleOption' ).length )
              jQuery( this ).unwrap( );
      } else {
          if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
              jQuery( this ).wrap( '&lt;span class="toggleOption" style="display: none;" /&gt;' );
      }
  };
  </code></pre>