Filtering elements out of a html list using javascript

Question

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

Explosion Pills · Accepted Answer · 2013-02-16 18:38:20Z

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/

answered Feb 16, 2013 at 18:38

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Westlake Over a year ago

this does not work completely as expceted. This searches the text of the list item, want it to search the ID

Explosion Pills Over a year ago

@MattWestlake oh, I apologize. Simply change innerHTML to id above: jsfiddle.net/ExplosionPIlls/bWRkz/1

jfriend00 · Accepted Answer · 2013-02-16 19:25:01Z

1

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.

edited Feb 16, 2013 at 19:25

answered Feb 16, 2013 at 18:45

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

3 Comments

Matt Westlake Over a year ago

Also searches the text, i want it to search the ID

jfriend00 Over a year ago

@MattWestlake - maybe you should clarify your question then. That was not clear to me at all. You got two answers that both searched the text.

jfriend00 Over a year ago

@MattWestlake - answer modified to search the <li> id only.

Collectives™ on Stack Overflow

Filtering elements out of a html list using javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related