Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Criteria Filter for Searching a Table

    I have a table. The first column is "code" (for example, ME or VA )and the second column is "description" (for example, Maine or Virginia).

    If users enter a letter or letters in the "search" text field, I would like the table to display the US states that start with that letter or letters. For example, it users enter "ma", the table displays:

    MAINE ME
    MARSHALL ISLANDS MH
    MARYLAND MD
    MASSACHUSETTS MA

    Is there JavaScript for this filtered search?

    Thanks a lot.

  • #2
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

    this code is what you need, but you should do that using server side script not using JS.

    Code:
    <script>
    function Filter(table){
    var f=document.getElementById('f').value.toUpperCase();
     for (a=1; a<table.rows.length; a++) 
     {
      if (table.rows[a].cells[0].innerHTML.toUpperCase().indexOf(f)!=0)
      table.rows[a].style.display="none"; else
      table.rows[a].style.display="table-row";
     } 
    }
    </script>
    
    <table id="states" border=1>
    <tr><td>State</td><td>Code</td></tr>
    <tr><td>ALABAMA</td><td>AL</td></tr>
    <tr><td>ALASKA</td><td>AK</td></tr>
    <tr><td>MAINE</td><td>ME</td></tr>
    <tr><td>MARSHALL ISLANDS</td><td>MH</td></tr>
    </table>
    
    <form>
    <input type="text" name="f" id="f">
    <input type="button" value="Filter" onclick="Filter(document.getElementById('states'));">
    </form>
    Forum for webmasters and developers
    http://www.htmlfrenzy.com
    Are you an IT expert? Join our Reward system
    www.htmlfrenzy.com/reward-system.php

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am in the process of testing out the code that you provided. Thank you for your prompt reply.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Provide Filter Criterion and Display Filtered Table

    I have managed to use the JavaScript "onkeyup" in the input text field to display a table according to the filter criterion supplied (see the code below). But what I really want is to use the button "onclick".

    The "onkeyup" works but somehow "onclick" does not work. If anybody would kindly taking a look at the code and provide guidance, I would highly appreciate.

    Sorry, the code in ***.jsp is written in JSF; nevertheless, it is almost the same as HTML.
    Code:
    <h:inputText id="filter" onkeyup="filterTable_key(this, 'genderTypes:genderTable')"  style="width:7em;" styleClass="withoutTextDefault"/>
    
    <h:commandButton value="Find" immediate="true" styleClass="buttonDefault" onclick="filterTable_button('genderTypes:filter', 'genderTypes:genderTable')"/>
    Code:
    function filterTable_key(term, _id) {
    	var terms = term.value.toLowerCase().split(" ");
    	var table = document.getElementById(_id);
    	for (var r = 1; r < table.rows.length; r++) {
    		var display = '';
    		for (var i = 0; i < terms.length; i++) {
    			if (table.rows[r].innerHTML.replace(/<[^>]+>/g, "").toLowerCase()
    				.indexOf(terms[i]) < 0) {
    				display = 'none';
    			} else {
    				// if (terms[i].length) highlight(terms[i], table.rows[r]);
    			}
    			table.rows[r].style.display = display;
    		}
    	}
    }
    
    function filterTable_button(_in, _id) {
    	var term = document.getElementById(_in);
    	var terms = term.value.toLowerCase().split(" ");
    	var table = document.getElementById(_id);
    	for (var r = 1; r < table.rows.length; r++) {
    		var display = '';
    		for (var i = 0; i < terms.length; i++) {
    			if (table.rows[r].innerHTML.replace(/<[^>]+>/g, "").toLowerCase()
    				.indexOf(terms[i]) < 0) {
    				display = 'none';
    			} else {
    				// if (terms[i].length) highlight(terms[i], table.rows[r]);
    			}
    			table.rows[r].style.display = display;
    		}
    	}
    }

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Put a name to the filter field.
    Code:
    <input type="button" value="Find" onclick="filterTable_key(this.form.nameOfFilterField, 'genderTypes:genderTable')" />
    Or if you want to use the id:
    Code:
    <input type="button" value="Find" onclick="filterTable_key(document.getElementById('filter'), 'genderTypes:genderTable')" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for spending time to help me again.

    In fact, the button onclick also works. The problem is with the JSF <h:commandButton ....> tag. This tag implies "sumbit". However, I am doing a client side JavaScript function and I do not want to "submit" the form. After I changed the <h:commandButton> to the "button" type, the filter works.

    Now, I run into another problem and I do not know if I should start another thread --

    What I am doing is that I have a parent page. This filter input textfield and the "list of values" table are in the popup window. In the popup window, I enter the filter criterion and the table displays a list of values according to the filter criterion provided. So far so good.

    However, if I return to the parent page and come back to this popup window, the filter textfield is populated with the previously entered filter criterion; i.e., when the popup window is re-visited, all the values of the previous visit are kept in memory and re-appear automatically.

    How do I clean up the memory?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •