JavaScript Form Filter issues

programming web dev
1

First off let me start by saying I don’t know JavaScript almost at all, and all I do understand is carried over from my knowledge of ActionScript2.0 so forgive me if I’m asking an obvious question.

I had this idea to create a list of projects and having the ability to filter them with a form. I did loads of searching and found a way to do it via this source code which lead to the creation of [url=http://dougstewartdesign.com/tests/form_filter/]my own test. At first glance everything seems to work great, you type something in and the form filters down. You select a year and only that year is shown. You select a category and only that category. But then you notice that when you use either of the three form controls it ignores anything from the other elements. Selecting “web” then “2007” doesn’t just give you web projects in 2007 but all projects in 2007. Needless to say this isn’t what I had in mind.

The JavaScript is…


<script type="text/javascript">
   	function filter (phrase, _id){
		var words = phrase.value.toLowerCase().split(" ");
		var table = document.getElementById(_id);
		var ele;
		for (var r = 1; r < table.rows.length; r++){
			ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
		        var displayStyle = 'none';
		        for (var i = 0; i < words.length; i++) {
			    if (ele.toLowerCase().indexOf(words*)>=0)
				displayStyle = '';
			    else {
				displayStyle = 'none';
				break;
			    }
		        }
			table.rows[r].style.display = displayStyle;
		}
	}
  </script>

…And the form is…


<form>
    	<b>Include:</b> <input name="filt" onkeyup="filter(this, 'sf', '1')" type="text">
	<select onchange="filter(this, 'sf', '1')" name="year">
		<option value="">year</option>
		<option value="2008">2008</option>
		<option value="2007">2007</option>
		<option value="2006">2006</option>
		<option value="2005">2005</option>
	</select>
	<select onchange="filter(this, 'sf', '1')" name="category">
		<option value="">category</option>
		<option value="web">web</option>
		<option value="graphic">graphic</option>
		<option value="print">print</option>
	</select>
</form>

If anyone has any recommendations I’d very much appreciate it!

2

I found that I’m able to make this filter javascript work for a requirement on a web page. But not part of the requirement is the input field of the keyword. I’m having difficulty removing the input field with keyword phrase and just have the words filtered only from the drop down selection. Also, when I select a “year” I would like “category” to jump back to the category value.

[quote=borrob;2287266]yes, changed it for you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS Table Filter</title>
        <meta name="description" content="Client-side JavaScript table filter."/>
        <meta name="keywords" content="javascript, table, filter"/>
        <link href="default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
<script type="text/javascript">
function dog( id )
{
    return document.getElementById( id );
}
 
function filter ()
{
    var word_filter_arr = dog('phrase_filter').value.split(' ');
    var year_filter = dog('year_filter').value;
    var category_filter = dog('category_filter').value;
 
    var table = dog('result_table');
 
 
    var row_content;
    var element_filtered = false;
    var word_found = false;
    var element_visible = false;
    var tags; 
    for (var r = 1; r < table.rows.length; r++)
    {
        p_collection = table.rows[r].getElementsByTagName('P');
        word_found = false;
        for( j = 0; j < p_collection.length; j++ )
        {   
           if( p_collection[j].className == 'tags' )
           {
                 tags_content = p_collection[j].innerHTML;
           }
        }
        element_visible = false;
        if( word_filter_arr.length == 0 )
        {
           word_found = true;
        }                        
        for ( var i = 0; i < word_filter_arr.length; i++ ) 
        {
            if ( tags_content.toLowerCase().indexOf( word_filter_arr* ) >=0 )
            {
                word_found = true;      
            }
        }
        if( word_found && ( tags_content.toLowerCase().indexOf( year_filter ) >=0  || year_filter == -1 ) )
        {
            if( word_found && ( tags_content.toLowerCase().indexOf( category_filter ) >=0 || category_filter == -1 ) )
            {
                element_visible = true;
            }
        }
        if( element_visible )
        {
            table.rows[r].style.display = 'block';
        }
        else
        {
            table.rows[r].style.display = 'none';
        }
    }
}
</script>
    <form>
        <b>Include:</b> 
        <input id="phrase_filter" onkeyup="filter()" type="text" />
        <select onchange="filter()" id="year_filter">
            <option value="-1">year</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
        </select>
        <select onchange="filter()" id="category_filter">
            <option value="-1">category</option>
            <option value="web">web</option>
            <option value="graphic">graphic</option>
            <option value="print">print</option>
        </select>
    </form>
    <div id="data_table">
        <table id="result_table">
            <tr>
                <td>
                    <h2>Projects</h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Project 1</h3>
                    <img id="image" src="image.gif" alt="image 1"></img>
                    <p>Lorem ipsum dolor sit amet, habitasse varius condimentum consectetuer vitae, convallis sed dui et faucibus. Id taciti nibh, iste iaculis sed etiam nec dis, nam dapibus quis velit tristique enim. In est amet tincidunt, duis rutrum mollitia elit porta wisi. Risus mi egestas aenean wisi, cras possimus interdum a, tortor amet. Magnis eu, turpis vulputate. Nibh id. Mollis fermentum wisi mauris purus. Class donec amet, vel in, metus malesuada felis nulla. Et vehicula ac lacinia urna praesent urna.</p>
                    <p class="tags"><br/><b>Tags: </b><i>2007, graphic</i></p>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Project 2</h3>
                    <img id="image" src="image.gif" alt="image 2"></img>
                    <p>Lorem ipsum dolor sit amet, habitasse varius condimentum consectetuer vitae, convallis sed dui et faucibus. Id taciti nibh, iste iaculis sed etiam nec dis, nam dapibus quis 2005 velit tristique enim. In est amet tincidunt, duis rutrum mollitia elit porta wisi. Risus mi egestas aenean wisi, cras possimus interdum a, tortor amet. Magnis eu, turpis vulputate. Nibh id. Mollis fermentum wisi mauris purus. Class donec amet, vel in, metus malesuada felis nulla. Et vehicula ac lacinia urna praesent urna.</p>
                    <p class="tags"><br/><b>Tags: </b><i>2007, print</i></p>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Project 3</h3>
                    <img id="image" src="image.gif" alt="image 3"></img>
                    <p>Lorem ipsum dolor sit amet, habitasse varius condimentum consectetuer vitae, convallis sed dui et faucibus. Id taciti nibh, iste iaculis sed etiam nec dis, nam dapibus quis velit tristique enim. In est amet tincidunt, duis rutrum mollitia elit porta wisi. Risus mi egestas aenean wisi, cras possimus interdum a, tortor amet. Magnis eu, turpis vulputate. Nibh id. Mollis fermentum wisi mauris purus. Class donec amet, vel in, metus malesuada felis nulla. Et vehicula ac lacinia urna praesent urna.</p>
                    <p class="tags"><br/><b>Tags: </b><i>2007, web</i></p>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Project 4</h3>
                    <img id="image" src="image.gif" alt="image 4"></img>
                    <p>Lorem ipsum dolor sit amet, habitasse varius condimentum consectetuer vitae, convallis sed dui et faucibus. Id taciti nibh, iste iaculis sed etiam nec dis, nam dapibus quis velit tristique enim. In est amet tincidunt, duis rutrum mollitia elit porta wisi. Risus mi egestas aenean wisi, cras possimus interdum a, tortor amet. Magnis eu, turpis vulputate. Nibh id. Mollis fermentum wisi mauris purus. Class donec amet, vel in, metus malesuada felis nulla. Et vehicula ac lacinia urna praesent urna.</p>
                    <p class="tags"><br/><b>Tags: </b><i>2008, print</i></p>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Project 5</h3>
                    <img id="image" src="image.gif" alt="image 5"></img>
                    <p>Lorem ipsum dolor sit amet, habitasse varius condimentum consectetuer vitae, convallis sed dui et faucibus. Id taciti nibh, iste iaculis sed etiam nec dis, nam dapibus quis velit tristique enim. In est amet tincidunt, duis rutrum mollitia elit porta wisi. Risus mi egestas aenean wisi, cras possimus interdum a, tortor amet. Magnis eu, turpis vulputate. Nibh id. Mollis fermentum wisi mauris purus. Class donec amet, vel in, metus malesuada felis nulla. Et vehicula ac lacinia urna praesent urna.</p>
                    <p class="tags"><br/><b>Tags: </b><i>2005, web</i></p>
                </td>
            </tr>
        </table>
    </div>
    </body>
</html>

you will have to keep the tags inside a <p> tag with class=‘tags’[/quote]