Topic awaiting preservation: Filter results with DHTML

Hello,
I'd like to add a textbox to the top of the results on this page, the calendar results... then, when a user starts typing in the textbox I'd like the results to filter by the name of the event (Big orange title).
How is this possible?

Example:
User Keys in "State", as he/she keys, the results filter down.
Eventually, events with "State" as part of the title would only show.

Here is the page:
http://www.meetscoresonline.com/results.asp

Karl

general outline - I have no idea how good your javascript actually is - and am tired

each entry on a div.
give attributes for the search term to each of your div ('searchTerm='.
on keypress in edit box, loop through 'childs of parentdiv', if they're a div, and have attribute, check if searchTerm matches user input
(string.match in javascript - but beware of the user entering regexps. best to filter his input to a-z 0-9).

if (bFound)

   currentElement.style.display = "block;"

 else

   currentEement.style.display = "none"

so long,

->Tyberius Prime

My javascript is so so... usualy with this sort of direction I can at least get something started! Thanks, I'll post back later with more questions.

Karl

Uggg... I'm stuck trying to loop through the child elements of my containing DIV. Here is what I am using to do this:
(For sure, divElm is an object)

thisChild = divElm.firstChild;

while ( thisChild != divElm.lastChild )
{
if ( thisChild.nodeType == 1 )
{
}
thisChild = thisChild.nextSibling;
}

[ FOLLOWUP ]
The first elms object creation works and brings back 800+, the 2nd brings back undefined... actually it errors.

var elms=document.getElementsByTagName('div');
alert(elms.length);

elms=divElm.getElementsByTagName('div');
alert(elms.length);

What does that mean? Does it mean:
1) I don't have a proper divElm object?
2) My browser (IE6) doesn't support this method (which is the error)?
3) I'm just doing something wrong?

Karl

(Edited by Karl on 02-14-2005 06:13)

Hmm, what error does it give you? Are you positive divElm is properly defined at that point? I believe IE 6 supports getElementsByTagName properly.


 

* Tired *
I will have to try again tomorrow. I tried to follow this:
http://www.onlinetools.org/tools/domcollapsedata/domcollapse.js
...but over my head.

I over-simplified my test with the following but never could get a lenth for the child elements of MEET_SELECTION

function filtermeets() {
m=document.getElementById("MEET_SELECTION");
trig=m.getElementsByTagName("div");
alert(trig.length);
}

</script>
</head>
<input type="text" value="" name="meet_selection" onkeypress="filtermeets()" />
<div id="MEET_SELECTION">
<div class="clear" searchterm="2005 Wine Country Classic Rohnert Park Gymn.">
1st div
</div>
<div class="clear" searchterm="Tidal Wave Classic 2005 Peninsula Gymnastics">
2nd div
</div>
</div>

Karl

my usually 'loop through children' code

var el = someElement.firstChild;

while (el)

{

doStuf(el);

el = el.nextSibling;

}

That seems like a nice simple approach Tyberius... I will give that a shot.
Slime: The error I was receiving is that the object did not support GetElementsByTagName. However, my confidence my code was clean / well-formed is not high. I will further my efforts and give input later today.

My simple test is failing ; (
Can someone please take a look, here it is:
http://www.meetscoresonline.com/temp/testchildelms.html

the bug in IE comes from the fact that that piece of shit treats the name attributes like the id attribute. Therefore you input with the name="meet_selection" is retrieved by the document.getElementById("MEET_SELECTION") . Damn!! and it does not even respect the case.



(Edited by poi on 02-16-2005 04:02)

I have to share your sentiments... what a piece of shit browser!
Man that sucks... thanks for pointing out the obvious!

My simple test should be working now.
Thanks poi!

Things are coming along!
Now, I would like there to be a pause of 1 second for the user input before kicking off the search through the results for a match. If I have 2 functions, one responding to the onkeyup event and one responding to the setTimeout call which is kicked off from this onkeyup event, how do I pass an object with the setTimeout event? So:

function_a(inputElm) {
setTimeout('function_b(need_to_pass_inputElm_object)',1000);
}

function_b(inputElm) {
//do something
}

as well... if I am in the middle of *doing something*... can I HALT the execution of this because the user has decided to change the searchterm prior to it completing the filter?

Thanks!

If you are just passing the name of the element you can just do:

setTimeout('function_b('+need_to_pass_inputElm_object+')',1000);

To stop execution you need to do two things. One is check a flag (that needs to be reset as well) that can also kill the while loop.

You would also need to assign the timeout to a variable

test = setTimeout(....


and then clear it

clearTimeout( test ) ;



.:[ Never resist a perfect moment ]:.

With this:
filterTimer = setTimeout('filtermeets2('+ inputElm +')',1000);
I keep getting 'object' is undefined...

And I don't have that error when I remove the inputElm from the setTimeout method. Maybe I'm doing it wrong ; (

It's Done! Please critique my javascript. I'd like to see it faster maybe, currently set to trigger off results after 1.5 second pause. Is this too slow? Also, could the actual loop / find and hide be more efficient?

Phase II, I need advice:
Accept multiple words in filter, the lookup becomes "include all words in filter, any order" (currently it is an exact match).

Karl

[Edit]
The link: http://www.meetscoresonline.com/results.asp

(Edited by Karl on 02-17-2005 09:58)

i have nothing to add to what this topic is about but.........are you going to make this look pretty in Firefox?

Later,

C:\