CODEWITHSUNDEEP
javascriptlist
Matt Westlake
Matt Westlake

Reputation: 3651

Filtering elements out of a html list using javascript

So I have a list of items and a text box, and I want to apply the hidden attribute to the items not matching what is in the text box. I am using javascript to do this on the browser in real time. Here is my HTML (don't worry abou the g:textbox, i'm doing this in 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>

So i have the html setup, now I need to write the javascript.
1. I'm not sure if i'm using the filter.text correctly and 2. not sure how to get to the li ids inside the ul 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"
      }
   }
}

I want to say I need to iterate over a collection of elements, but that just may be the ruby/cucumber coming out of me

Upvotes: 0

Views: 4162

Answers (2)

jfriend00
jfriend00

Reputation: 707318

Here's a way to search the <li> id values in plain javascript:

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 = "";
    }
}

Demo: http://jsfiddle.net/jfriend00/wFEJ5/

This demo actually hides the elements so you can see them visually in the demo. You can obviously change the code to add/remove the hidden attribute if that's the end result you eventually want.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

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/

Upvotes: 2

Related Questions