javascriptでチェックボックスリストをフィルタリングできる最小のコード

プロジェクトにはjQuery、Dojo、Prototypeなどのjavascriptライブラリは必要ありませんので、簡単な方法はありません。私は、これをどうやって行うのかを説明する質問に対して深い回答をしたいと思います。たいていあなたが知っているように、asp.net checkboxlistはFlow repeatLayoutに以下のようなマークアップを出します。javascriptでチェックボックスリストをフィルタリングできる最小のコード

<span> 
<checkbox><label></br> 
<checkbox><label></br> 
<checkbox><label></br> 
</span>

私は簡単にするために終了タグと終了タグを入れていません。

私はどのように私がテキストボックスに検索用語を入力し、不一致のチェックボックス+ラベルを非表示にするとチェックボックスリストをフィルタリングしますか。

私は答えを取得したいと思いますいくつかのより多くの質問が

の上に関連しているが、この目的のために任意の既製のスタンドアロンスクリプトはありますか？
不具合を説明するパターン、記事、投稿、検索機能を提供する際に留意すべき点はありますか？ onkeydown don't do this,
私の考えのようなものは今、それぞれのタグによってラベル・タグのキャッシュされたコレクションinnerHTML、ループを持っているし、検索用語をチェックし、ときに見つかった非表示他のすべてが、唯一の一致を示してされるだろう。[私の関心は、何が起こるかでありますすべてのキープレスのループは、私が思う最高のアイデアではないにリストが

]、ご提案、回答、解決長すぎる場合、スクリプトは

出典

2011-09-06 Deeptechtons

この解決方法はKtashの答えに基づいています。私はjavascript、DOM navigating、RegExpについてもっと学びたいからだ。

前回はバックスペース/削除でトリガーしないので、「keypress」イベントを「keydown」に変更しました。バックスペース/削除ですべての文字を削除しても、フィルタリングされたままの状態です。

[Default.aspxの]も

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RealtimeCheckBoxListFiltering.Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
    window.onload = function() { 
     var tmr = false; 
     var labels = document.getElementById('cblItem').getElementsByTagName('label'); 
     var func = function() { 
     if (tmr) 
      clearTimeout(tmr); 
     tmr = setTimeout(function() { 
      var regx = new RegExp(document.getElementById('inputSearch').value); 
      for (var i = 0, size = labels.length; i < size; i++) 
      if (document.getElementById('inputSearch').value.length > 0) { 
       if (labels[i].textContent.match(regx)) setItemVisibility(i, true); 
       else setItemVisibility(i, false); 
      } 
      else 
       setItemVisibility(i, true); 
     }, 500); 

     function setItemVisibility(position, visible) 
     { 
      if (visible) 
      { 
      labels[position].style.display = ''; 
      labels[position].previousSibling.style.display = ''; 
      if (labels[position].nextSibling != null) 
       labels[position].nextSibling.style.display = ''; 
      } 
      else 
      { 
      labels[position].style.display = 'none'; 
      labels[position].previousSibling.style.display = 'none'; 
      if (labels[position].nextSibling != null) 
       labels[position].nextSibling.style.display = 'none'; 

      } 
     } 
     } 

     if (document.attachEvent) document.getElementById('inputSearch').attachEvent('onkeypress', func); // IE compatibility 
     else document.getElementById('inputSearch').addEventListener('keydown', func, false); // other browsers 
    }; 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <table> 
    <tr> 
     <td> 
     <asp:TextBox runat="server" ID="inputSearch" ClientIDMode="Static" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <asp:CheckBoxList runat="server" ID="cblItem" ClientIDMode="Static" RepeatLayout="Flow" /> 
     </td> 
    </tr> 
    </table> 
    </form> 
</body> 
</html>

[Default.aspx.cs]

using System; 
using System.Collections.Generic; 

namespace RealtimeCheckBoxListFiltering 
{ 
    public partial class Default : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      cblItem.DataSource = new List<string>() { "qwe", "asd", "zxc", "qaz", "wsx", "edc", "qsc", "esz" }; 
      cblItem.DataBind(); 
     } 
    } 
}

出典

2011-09-07 07:18:22

@Razvanそれは答えとしてマークするほど徹底的です。しかし、クレジットはKtashに行く – Deeptechtons

私は彼に彼が基本的なideeaに来た+1原因を与えた:) setTimeout/clearTimeoutはトリックを行う –

@Razvan私はこの答えにコメントする前にあなたのコメントを見た – Deeptechtons

var tmr = false; 
var labels = document.getElementsByTagName('label') 
var func = function() { 
    if (tmr) clearTimeout(tmr); 
    tmr = setTimeout(function() { 
     var regx = new Regex(inputVal); /* Input value here */ 
     for(var i = 0, size = labels.length; i < size; i++) { 
      if(regx.match(labels[i].textContent || labels[i].innerText)) labels[i].style.display = 'block'; 
      else labels[i].style.display = 'none'; 
     } 
    }, 100); 
} 
if (document.attachEvent) inputField.attachEvent('onkeypress', func); 
else inputField.addEventListener('keypress', func, false);

ない完璧な歓迎され、そして全てではありません方法は完全ですが、それを開始する必要があります。ループを実行する前に100ミリ秒の遅延があるため、すべてのキー押下では実行されませんが、入力をやめた直後です。おそらく、値段はちょっと試してみたいと思いますが、それはあなたに一般的な考え方を与えます。また、私はinputFieldとinputValの変数を設定していませんでしたが、私はあなたがすでに取得する方法を知っていると思います。あなたのラベルが静的リストの読み込みでない場合は、たびにリストを取得することをお勧めします。

出典

2011-09-06 07:21:42 Ktash

これは正しい方法で私をリードしました。あなたは同じパターン（私はデザインパターンを意味する）をお勧めしますか？また、私はさらに答えが得られるまで待つつもりです – Deeptechtons

@Ktash：+1のおかげで答え:) –

javascriptでチェックボックスリストをフィルタリングできる最小のコード

答えて

関連する問題