Question

我有根据过滤器显示或隐藏元素的代码我需要帮助，包括一个条件，如果浏览器是IE，那么根据过滤器用SPAN包装不匹配的元素并隐藏它们，反之亦然 - unspan和show。
我不知道语法和我反复失败。
我真的卡住了，请帮忙（如果你可以调整我的代码）
我的代码：

    <!--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

jQuery论坛中的人们非常乐于助人并解决了这个问题。这是包含解决方案的小提琴： 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.

jQuery语法辅助过滤器通过文本框击键选择输出（隐藏）

1 个答案: