Tìm kiếm trực tiếp trên jQuery với kiểu Quicksilver trong hộp danh sách đa lựa chọn

Tôi đang cố gắng lấy số jQuery Live Search with Quicksilver Style của John Resig để làm việc với một điều khiển đa hình thức được chọn. Mã của anh ấy dựa trên số John Nunemaker's Work phát triển mã số quicksilver.js của anh ấy.Tìm kiếm trực tiếp trên jQuery với kiểu Quicksilver trong hộp danh sách đa lựa chọn

Vấn đề tôi gặp phải là trong hộp chọn chỉ Firefox hỗ trợ .hide() trên các giá trị tùy chọn, tôi không thể tìm ra cách tiếp cận linh hoạt cho IE, Safari, Opera và Chrome.

Dưới đây là một ví dụ, tôi đã viết mã của John R nhưng bạn sẽ cần phải lấy quicksilver.js và tự lưu trữ tại địa phương. Một lần nữa, nó hoạt động rất tốt trong Firefox nhưng lời gọi tới rows.hide() không làm gì trên các trình duyệt khác.

Tôi đã thử gói các thẻ trong một div và ẩn nhưng không may mắn.

Bất kỳ ý tưởng nào?

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

Nguồn

2009-03-08 kevink

Vì vậy, về cơ bản, bạn đang tìm kiếm một cách trình duyệt chéo để ẩn các tùy chọn? – James

Có, cho đến nay nó chỉ hoạt động trong Firefox – kevink

Cách tiếp cận tốt nhất là chỉ thêm và xóa tùy chọn khỏi DOM.

Như thế này:

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

Cần ghi bàn trên mảng "tất cả" chứ không phải là hàng.

Nguồn

2009-03-08 19:00:27 Joel

Điều đó làm việc như một sự quyến rũ, cảm ơn bạn - Tôi đã đập đầu vào bàn. – kevink

Một vấn đề tiếp theo, bất cứ ai biết một cách tốt để thêm một sự chậm trễ vì vậy nếu một người dùng gõ một số phím nhanh chóng nó không gọi lọc mỗi khóa? Tại một vài nghìn tùy chọn, nó có thể nhận được khá chậm. – kevink

Bạn nên tạo một câu hỏi mới cho điều đó, nhưng trong ngắn hạn, bạn có thể sử dụng phương thức setTimeout/clearTimeout dựng sẵn của javascript để thêm độ trễ trước khi lọc. – Joel

Tìm kiếm trực tiếp trên jQuery với kiểu Quicksilver trong hộp danh sách đa lựa chọn

Trả lời

Các vấn đề liên quan