Wolfe,
I wrote a class a while back with similar functionality. You may find
a few tricks in it that help:
/
*
---------------------------------------------------------------------------
CLASS: Filter(input,els,[parentSelector]);
AUTHOR: Ryan J. Salva, [EMAIL PROTECTED]
ABOUT: Used to filter a list of items as you type
OPTIONS: parentSelector css selector for parent item
that should be
hidden
EXAMPLE: The following example searches the text of all <td
class="search_me"> elements
and hides all table rows not matching the
search criteria
<input type="text" id="Filter" />
<table>
<tbody>
<tr><td class="search_me">lorem
ipsum</td></tr>
<tr><td class="search_me">dolor
set</td></tr>
</tbody>
</table>
<script language="javascript"
type="text/javascript">
var filter = new
Filter('Filter',$$('td.search_me'),
{parentSelector:'tr'});
</script>
*/
var Filter = new Class({
Implements: [Options],
options: {
parentSelector: false
},
initialize: function(input, els, options) {
this.setOptions(options);
this.input = $(input);
this.els = els;
this.input.addEvent('keyup',function(e) {
this.filter(e.target.value);
}.bind(this));
if (Browser.Engine.trident) {
this.display = 'block'; // IE doesn't understand
'table-row'
} else {
this.display = (this.options.parentSelector ==
'tr')?'table-
row':'block';
}
this.filter(this.input.value)
},
filter: function(str) {
str = str.escapeRegExp();
this.els.each(function(el,index) {
var hide = (this.options.parentSelector)?
el.getParent(this.options.parentSelector):el;
if (el.get('text').test(str,'i')) {
hide.setStyles({
'display':this.display,
'color':'#000000' // safari and IE
cannot remove options
dynamically, so we just "dim" the non-matching options
});
} else {
hide.setStyles({
'display':'none',
'color':'#cccccc'
});
}
}.bind(this));
}
});
On Oct 7, 2:55 pm, "Wolfe Stuff" <[EMAIL PROTECTED]> wrote:
> Perfect! Turned out to be "table-row..." Thanks much :)
>
> On Tue, Oct 7, 2008 at 2:51 PM, rasmusfl0e <[EMAIL PROTECTED]> wrote:
>
> > the combination should be something like: display: table-cell /
> > display: none
>
> > On Oct 7, 11:37 pm, tr0y <[EMAIL PROTECTED]> wrote:
> > > I'm having a problem where the table cells collapse and get all wonky
> > > on a key event. Clearly I am doing something, but I can't seem to
> > > track down what it is. The only style I am changing is between
> > > display: block / display: none, but I am guessing that applying a
> > > block element within the table is messing it up. Any thoughts on
> > > solving this problem are greatly appreciated.
>
> > > You can see a demo of the problem here:
>
> > >http://www.consideropen.com/inprogress/live_search.html
