...

View Full Version : Criteria Filter for Searching a Table



jiapei_jen
06-18-2007, 05:06 PM
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.

smalldog
06-18-2007, 05:53 PM
Hello,

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



<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>

jiapei_jen
06-18-2007, 06:27 PM
I am in the process of testing out the code that you provided. Thank you for your prompt reply.

jiapei_jen
06-19-2007, 10:17 PM
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.


<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')"/>




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

glenngv
06-20-2007, 03:10 AM
Put a name to the filter field.

<input type="button" value="Find" onclick="filterTable_key(this.form.nameOfFilterField, 'genderTypes:genderTable')" />
Or if you want to use the id:

<input type="button" value="Find" onclick="filterTable_key(document.getElementById('filter'), 'genderTypes:genderTable')" />

jiapei_jen
06-20-2007, 06:04 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum