jQuery Wyszukiwanie na żywo za pomocą stylu Quicksilver w polu listy wyboru wielu

Próbuję pobrać wersję jQuery Live Search with Quicksilver Style Johna Resiga do pracy z formantem wyboru wielu form. Jego kod bazuje na John Nunemaker's Work rozwijając swój kod quicksilver.js.jQuery Wyszukiwanie na żywo za pomocą stylu Quicksilver w polu listy wyboru wielu

Problem polega na tym, że w polu wyboru tylko Firefox obsługuje .hide() na wartości opcji, nie mogę wymyślić snappy podejścia do IE, Safari, Opera i Chrome.

Oto przykład, umieściłem kod Johna R, ale będziesz musiał pobrać quicksilver.js i hostować go lokalnie. Znowu działa to świetnie w Firefoksie, ale wywołanie rows.hide() nie działa w innych przeglądarkach.

Próbowałem owijania znaczników w div i ukrywanie, ale bez powodzenia.

Wszelkie pomysły?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>LiveSearch</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="../jquery/quicksilver.js"></script> 

    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#q').liveUpdate('#posts').focus(); 
    }); 

    jQuery.fn.liveUpdate = function(list){ 
     list = jQuery(list); 

     if (list.length) { 
      // Changed 'li' to 'option' below 
      var rows = list.children('option'), 
       cache = rows.map(function(){ 
       return this.innerHTML.toLowerCase(); 
       }); 

      this 
       .keyup(filter).keyup() 
       .parents('form').submit(function(){ 
        return false; 
       }); 
     } 

     return this; 

     function filter(){ 
      var term = jQuery.trim(jQuery(this).val().toLowerCase()), scores = []; 

      if (!term) { 
       rows.show(); 
      } else { 
       rows.hide(); 

       cache.each(function(i){ 
        var score = this.score(term); 
        if (score > 0) { scores.push([score, i]); } 
       }); 

       jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ 
        jQuery(rows[ this[1] ]).show(); 
       }); 
      } 
     } 
    }; 

    </script> 
</head> 
<body> 

<form method="get" autocomplete="off" action=""> 

    <div> 
    <input type="text" value="" name="q" id="q"><br><br> 

    <select id="posts" multiple name="choices" SIZE="10" style="width: 250px"> 
     <option value="1">The Well-Designed Web</option> 
     <option value="2">Welcome John Nunemaker</option> 
     <option value="3">Sidebar Creative: The Next Steps</option> 
     <option value="4">The Web/Desktop Divide</option> 
     <option value="5">2007 in Review</option> 
     <option value="6">Don't Complicate the Solution</option> 
     <option value="7">Blog to Business</option> 
     <option value="8">Single Line CSS</option> 
     <option value="9">The Great Divide</option> 
     <option value="10">What's in a Name?</option> 
    </select> 

    </div> 


</form> 

</body> 
</html>

Źródło

2009-03-08 kevink

Po prostu szukasz sposobu na ukrycie przeglądarki w różnych przeglądarkach? – James

Tak, jak na razie działa tylko w Firefoksie – kevink

Najlepszym sposobem jest dodanie i usunięcie opcji z DOM.

Jak to:

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#q').liveUpdate('#posts').focus(); 
    }); 

    jQuery.fn.liveUpdate = function(list){ 
     list = jQuery(list); 

     if (list.length) { 
       // Changed 'li' to 'option' below 
       var rows = list.children('option'), 
        cache = rows.map(function(){ 
        return this.innerHTML.toLowerCase(); 
        }); 

       var all = rows; 
       all.each(function(i){ 
        $(this).attr("itext", this.innerHTML.toLowerCase()); 
       }); 

       this 
         .keyup(filter).keyup() 
         .parents('form').submit(function(){ 
           return false; 
         }); 
     } 

     return this; 

     function filter(){ 
       var term = jQuery.trim(jQuery(this).val().toLowerCase()), scores = []; 

       if (!term) { 
         list.append(all); 
       } else { 
         rows.remove(); 

         all.each(function(i){ 
           var score = $(this).attr("itext").score(term); 
           if (score > 0) { scores.push([score, i]); } 
         }); 

         jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ 
           list.append(all[this[1]]); 
         }); 

         rows = list.children('option'); 
       } 
     } 
    }; 

    </script>

EDIT:

Need zdobyć nad tablicę "All" zamiast wierszy.

Źródło

2009-03-08 19:00:27 Joel

To działało jak wdzięk, dziękuję - waliłem głową w biurko. – kevink

Jeden z dalszych problemów, każdy zna dobry sposób na dodanie opóźnienia, więc jeśli użytkownik wpisze kilka klawiszy szybko, nie wywołuje filtra przy każdym kluczowaniu? Przy kilku tysiącach opcji może być dość powolny. – kevink

Powinieneś utworzyć dla niego nowe pytanie, ale w skrócie możesz użyć wbudowanych metod javascript, setTimeout/clearTimeout, aby dodać opóźnienie przed filtrowaniem. – Joel

jQuery Wyszukiwanie na żywo za pomocą stylu Quicksilver w polu listy wyboru wielu

Odpowiedz

Powiązane problemy