simple jquery filter

by alanbeech

HTML

<input id="myinput" />
<div>
    <div class="listItem">one</div>
    <div class="listItem">two</div>
    <div class="listItem">three</div>
</div>
<select size="4" name="lstAvailableTestSchedules" style="height:200px;width:800px;">
    <option value="A50">SS (Online) (A50, OM)</option>
    <option value="A51">Turbidity&#160;(Online) (A51, OM)</option>
    <option value="A52">pH (Online) (A52, OM)</option>
    <option value="A53">Ammonia&#160;as N (Online) (A53, OM)</option>
    <option value="A54">Nitrate as NO3 (Online) (A54, OM)</option>
    <option value="A55">UV Transmittance TMO 1 (A55, OM)</option>
    <option value="A56">pH (Online),Turbidity&#160;(Online) (A56, OM)</option>
    <option value="A57">pH (Online),Turbidity&#160;(Online),Ammonia&#160;as N (Online) (A57, OM)</option>
    <option value="A58">pH (Online),Turbidity&#160;(Online),UV Transmittance TMO 1,Ammonia&#160;as N (Online),Nitrate as NO3 (Online) (A58, OM)</option>
    <option value="A59">pH (Online),Turbidity&#160;(Online),UV Transmittance TMO 1,Ammonia&#160;as N (Online) (A59, OM)</option>
    <option value="A60">Turbidity&#160;(Online),Ammonia&#160;as N (Online) (A60, OM)</option>
    <option value="A61">Turbidity&#160;(Online),Ammonia&#160;as N (Online),Nitrate as NO3 (Online) (A61, OM)</option>
    <option selected="selected" value="A62">Turbidity&#160;(Online),UV Transmittance TMO 1,UV Transmittance TMO 2 (A62, OM)</option>
    <option value="A63">pH (Online),Ammonia&#160;as N (Online) (A63, OM)</option>
    <option value="A64">pH (Online),Ammonia&#160;as N (Online),Phosphate (Online),Aluminium (Online) (A64, OM)</option>
    <option value="A65">pH (Online),Phosphate (Online),Aluminium (Online) (A65, OM)</option>
    <option value="A66">pH (Online),UV Transmittance TMO 1 (A66, OM)</option>
    <option value="A67">UV Transmittance TMO 1,UV Transmittance TMO 2 (A67, OM)</option>
    <option value="A68">UV Transmittance TMO 1,UV Transmittance TMO 2,Aluminium (Online) (A68, OM)</option>
   ...

CSS

.listItem {
    display: none;
}

JavaScript

$('#myinput').keyup(function () {
       var filterText = $('#myinput').val();
       $('#visibleSelect').empty();
       $('select[name="lstAvailableTestSchedules"] option').each(function () {
           if ($(this).text().indexOf(filterText) >= 0 && filterText != '') {
               $('#visibleSelect').append('<option value="' + $(this).attr('value') + '">' + $(this).text() + '</option>');
           }
       });
   });