jQuery構文補助フィルタテキストボックスキーストロークでオプションを選択（非表示）を選択

Question

フィルタに応じて要素を表示または非表示にするコードがあります。
私は、ブラウザがIEの場合、フィルタに応じて、不一致要素をSPANでラップして非表示にし、逆にアンパンと表示するという条件を含むヘルプが必要です。
構文がわからず、繰り返し失敗しました。
私は本当にこだわっている、（私のコードを微調整することにより、可能な場合は）助けてください
マイコード：非常に役立つとこれを解決するjQueryのフォーラムで

<!--This is where I filter the ListBox (select) >> (option) elements via keystrokes --> 
<!--Via jQuery on my Listbox control I add a css class so I can work with it here - class ".srcItem" --> 
<script type="text/javascript"> 
    $(document).ready(
     function() { 
      var elemSrc = document.getElementById("<%=srcBox.ClientID%>"); 
      $(elemSrc).find("option").addClass("srcItem"); 
     } 
     ); 
</script> 

<script type="text/javascript"> 
    $(document).ready(
    function() { 
     var $users = $('.srcItem'); 
     $('#usrSearch').keyup(function() { 
      $users.show(); //THis is regular jQuery that works only in Chrome 

       return; 
      } 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

      //Below is regular jQuery that works only in Chrome 

      $users.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 

      }).hide(); 

     }); 
    } 
    ); 

</script> 

Answer 1

人々。 JakeCigarFiddle

HTML：：

<input id="usrSearch" type="search" placeholder="Filter..." style="width: 154px; height: 25px; margin-bottom: 5px; margin-top: 2px; margin-right: 1px; border-width:4px; border-radius:10px;" /> 

<select name="leftSrcBox" id="srcBox" style="border-width: 4px; padding: 4px; border-radius: 10px; width: 200px; height: 400px;" size="4"> 
<option class="srcItem" value="72371">Adam Sandler</option> 
<option class="srcItem" value="95310">Adam Boldwin</option> 
<option class="srcItem" value="54288">Adam Eve</option> 
<option class="srcItem" value="90217">Boris Johnson</option> 
<option class="srcItem" value="74724">Boris Bekker</option> 
<option class="srcItem" value="54536">Bob Dylan</option> 
<option class="srcItem" value="36202">Carl Sagan</option> 
<option class="srcItem" value="5975">Carl Booker</option> 
<option class="srcItem" value="38307">Cory Sanders</option> 
<option class="srcItem" value="92817">David Whealan</option> 
<option class="srcItem" value="8730">David Hurst</option> 
<option class="srcItem" value="30775">Danny Sanders</option> 
<option class="srcItem" value="78253">Dan Dover</option> 
<option class="srcItem" value="95183">Ethan Jenkins</option> 
<option class="srcItem" value="31344">Ethan Hunt</option> 
<option class="srcItem" value="57950">Edgar Pugh</option> 
<option class="srcItem" value="36384">Ed Wilkins</option> 
<option class="srcItem" value="36715">Fred Jefferson</option> 
<option class="srcItem" value="65292">Freddy Mercury</option> 
<option class="srcItem" value="47803">Gina Davis</option> 
<option class="srcItem" value="48991">Giovanni Bonucci</option> 
<option class="srcItem" value="54213">Heather Stevens</option> 
<option class="srcItem" value="45948">Hector Wallas</option> 
<option class="srcItem" value="44818">Igor Biskan</option> 
<option class="srcItem" value="95863">Iggy Pop</option> 
<option class="srcItem" value="48637">Jacob Allen</option> 
<option class="srcItem" value="45658">Jacob Collins</option> 

</select> 

JS： はここに解決策が含まれていますフィドルある

$(function() { 
     var $select = $("#srcBox").clone(); 
     $('#usrSearch').keyup(function() { 
     var currentValue=$("#srcBox").val(); 
     var search = squeeze($(this).val()); 
     $("#srcBox").html($select.children().clone().filter(function() { 
     return squeeze($(this).text()).match(search) 
     })).val(currentValue) 
    }); 
}); 

function squeeze(v) { 
    return v.replace(/\s+/g, ' ').toLowerCase(); 
}   

JakeCigarの説明：

 $(function() { // wait till the DOM is ready 
     var $select = $("#srcBox").clone(); // save off an untouched copy of the select. 
    $('#usrSearch').keyup(function() { 
     var currentValue=$("#srcBox").val(); // remember what was selected 
     var search = squeeze($(this).val()); // squeeze what they typed in 
     // this is where is gets complex. 
     // set the srcBox to a new clone of the clone that was filtered 
     // then set the value back to what was selected 
     $("#srcBox").html($select.children().clone().filter(function() { 
      return squeeze($(this).text()).match(search) 
     })).val(currentValue) 
    }); 
    }); 

    function squeeze(v) { // since you need to squeeze both the text and the option values 
           // I moved it out to a function 
     return v.replace(/\s+/g, ' ').toLowerCase(); 
} 
//No need to write special code for IE, because it is classic jQuery code.