0

アイテムのリストとテキスト ボックスがあり、テキスト ボックスの内容と一致しないアイテムに hidden 属性を適用したいと考えています。これをリアルタイムでブラウザ上で行うためにJavaScriptを使用しています。これが私の HTML です (g:textbox について心配する必要はありません。私は grails でこれを行っています)。 

Filter List :<g:textBox id = filter onkeyup = Javascript:filter()>

<ul id = 'terms'>
    <li id = 'AFUE'>AFUE
        <p> Annualized Fuel Utilization Efficiency is a measure of your furnace’s heating efficiency. The higher the AFUE percentage, the more efficient the furnace. The minimum percentage established by the DOE for furnaces is 78.</p>
    </li>
    <li id = 'Airflow'>Airflow
        <p> The distribution or movement of air. </p>
    </li>
    <li id = 'Air Handler/Coil Blower'>Air Handler/Coil Blower
        <p> The indoor part of an air conditioner or heat pump that moves cooled or heated air throughout the ductwork of your home. An air handler is usually a furnace or a blower coil.</p>
    </li>
    <li id = 'Bioaerosols'>Bioaerosols
        <p>Microscopic living organisms that grow and multiply in warm, humid places.</p>
    </li>
</ul>

html の設定ができたので、今度は javascript を書く必要があります。
1. filter.text を正しく使用しているかどうかわからない 2. ul id 内の li id にアクセスする方法がわからない

function filter(){
   // on each li item in ul where ul id = 'terms'
   {
      if //li item id.match(${filter.text})
      {
           //li item.hidden = "false"
      }
      else if !//li item id.match(${filter.text})
      {
           //li item.hidden = "true"
      }
      else if ${filter.text} = ""
      {
           //set all items hidden = "false"
      }
   }
}

要素のコレクションを反復する必要があると言いたいのですが、それは私から出てくるルビー/キュウリかもしれません

4

2 に答える 2

2 
var filterText = document.getElementById('filter').value,
    lis = document.querySelectorAll('#terms li'),
    x;

for (x = 0; x < lis.length; x++) {
    if (filterText === '' || lis[x].innerHTML.indexOf(filterText) > -1) {
        lis[x].removeAttribute('hidden');
    }
    else {
        lis[x].setAttribute('hidden', true);
    }
}

http://jsfiddle.net/ExplosionPIlls/bWRkz/

于 2013-02-16T18:38:20.387 に答える
1

<li>プレーンな JavaScript で id 値を検索する方法は次のとおりです。

function keyTyped(e) {
    var items = document.getElementById("terms").getElementsByTagName("li");
    var matches = [];
    var typed = e.target.value;
    var text, i;
    for (i = 0; i < items.length; i++) {
        text = items[i].id;
        if (!typed || text.indexOf(typed) != -1) {
            matches.push(items[i]);
        }
    }
    // now hide all li tags and show all matches
    for (i = 0; i < items.length; i++) {
        items[i].style.display = "none";
    }
    // now show all matches
    for (i = 0; i < matches.length; i++) {
        matches[i].style.display = "";
    }
}

デモ: http://jsfiddle.net/jfriend00/wFEJ5/

このデモでは実際に要素が非表示になっているため、デモで視覚的に見ることができます。最終結果が最終的に必要な場合は、非表示属性を追加/削除するようにコードを変更できます。

于 2013-02-16T18:45:39.687 に答える