複数選択リストボックスでQuicksilverスタイルでjQueryライブ検索

私はジョンレジグのjQuery Live Search with Quicksilver Styleを選択マルチフォームコントロールで使用するようにしています。彼のコードは彼のquicksilver.jsコードを開発しているJohn Nunemaker's Workに基づいています。複数選択リストボックスでQuicksilverスタイルでjQueryライブ検索

私が抱えている問題は、Firefoxがオプション値で.hide（）をサポートするだけの選択ボックス内で、IE、Safari、Opera、Chromeのためのすばらしいアプローチを見つけることができないということです。

これは例ですが、私はJohn Rのコードをインライン展開しましたが、quicksilver.jsを取得してローカルでホストする必要があります。これはFirefoxでもうまくいきますが、rows.hide（）の呼び出しは他のブラウザでは何もしません。

私はdiv内にタグをラップし、それを隠しているが運がないことを試みました。

アイデア？

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

出典

2009-03-08 kevink

基本的に、ブラウザを横切ってオプションを隠す方法を探していますか？ – James

はい、これまではFirefoxでしか動作しません – kevink

最良の方法は、DOMにオプションを追加したり削除したりすることです。このよう

：

<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：配列 "すべて" ではなく行を超えるスコアに

必要があります。

出典

2009-03-08 19:00:27 Joel

それは魅力的なように機能しました、ありがとう - 私は机の上に頭を打っていました。 – kevink

1つのフォローアップの問題は、誰もが遅延を追加する良い方法を知っているので、ユーザーが複数のキーをすばやく入力すると、すべてのキーアップをフィルタリングしません。何千ものオプションでかなり遅くなることがあります。 – kevink

これについて新しい質問を作成する必要がありますが、要するにjavascriptの組み込みsetTimeout/clearTimeoutメソッドを使用してフィルタ処理前に遅延を追加することができます。 – Joel

複数選択リストボックスでQuicksilverスタイルでjQueryライブ検索

答えて

関連する問題