On Dec 1, 1:43 pm, Walter Lee Davis <[EMAIL PROTECTED]> wrote:
> I've been working on a problem today and wanted to share the results
> here. I have a very tall list of authors on a page, and wanted to make
> a simple filter field where you could type in a few characters of the
> name and have the list shrink down to only include matches. After
> struggling for an hour or more with various different methods, I
> finally stopped trying to swim upstream and did less.
>
> I was using a Form.Element.Observer, but inside that function I was
> using an optimized (backwards) for loop to iterate over my found array
> of list items, and toggling visibility on each one in turn. This was
> taking forever, causing a beachball on an 8-core Mac Pro in Firefox (I
> shudder to think what would happen in a lesser Mac).
>
> I was looking through the various enumerable options and saw reject,
> and then select, and the lightbulb went on:
>
> document.observe("dom:loaded",function(){
> var t = $$("#listAll li");
> var f = $F("filter");
> new Form.Element.Observer(
> "filter",
> 0.2,
> function(el, value){
> if(value != f){
> t.invoke('hide');
> t.select(function(elm){
> return
> elm.down('a').innerHTML.toLowerCase().include(value.toLowerCase());
> }).invoke('show');
> f = value;
> }
> }
> )
> });
>
> This behaves the way you would want it to -- so fast that the change
> doesn't register until the list starts getting very short.
I think something along these lines could be faster:
document.observe("dom:loaded", function() {
var list = $$("#listAll li");
var lastValue = $F("filter");
$('filter').observe('keyup', function(e) {
var value = this.value;
if (value !== lastValue) {
value = value.toLowerCase();
list.each(function(el) {
if (el.innerHTML.toLowerCase().include(value)) {
Element.show(el);
}
else {
Element.hide(el);
}
})
lastValue = value;
}
})
})
>
> Walter
--
kangax
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
