how to use jquery to "live search" (filter) items on a html select?

Question

I guess the title says it all. I have a simple text input and a select (multiple).

I want to filter items from that select according to input..

Answer 1

This tutorial may help you: http://vision-media.ca/resources/jquery/jquery-inline-search-plugin

Though, its formatting somewhat messed up. For example, where you see $.fn.< strong >search< / strong> it should be just $.fn.search

Answer 2

Just the relevant parts of my attempt (visible at http://jsfiddle.net/VeLKW/2/):

<script type="text/javascript">
$(function() {
  var 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($('<option/>').attr('value', this[0]).text(this[1]));
      }
    });
  });
});
</script>

<input id="someinput"><br><select id="optlist" multiple="multiple">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">foobar</option>
<option value="4">foobarbaz</option>
</select>