To the definition of Ajax.Request in prototype.js we added the function:

abort: function() {
this.transport.abort();
}


In Scriptaculous (controls.js) Ajax.Autocompleter:
we declared a global variable:

var my_search;


we updated getUpdatedChoices() so the last two lines in the method look like:

//line added
try {my_search.abort();} catch (e) {}
//line changed
my_search = new Ajax.Request(this.url, this.options);

Thanks to zac for leading us down the right path.

Wrong way (as you can see in controls.js):
Event.observe(this.element, “blur”, this.onBlur.bindAsEventListener(this));
Event.observe(this.element, “keypress”, this.onKeyPress.bindAsEventListener(this));

Right way:
Event.observe(this.element, “blur”, this.onBlur.bindAsEventListener(this));
new Form.Element.DelayedObserver(this.element, 0.5, this.onKeyPress.bindAsEventListener(this));

1. User enters 2006
2. (on key up) Ajax Call, find match for 2006 results query
3. user types 200698 or whaterver.
4. abort #2 query, ajax call
5. Ajac call for #3
6. Loop if needed.

All the librarys do support some method of abort() for ajax requests,

right? or no?

It should be noted that he is selling a solution for $50 to the ‘problem’ in these libraries.

Ugh…


// global var
var my_search;

my_search = request;
}


if (sQuery != oSelf._oTextbox.value) { return; }

Sorry for spam you. :P

I record the screencast on my AMD Althon 2000+ with 1G memory. I made it *played slowly than the actuly speed* to make sure that everyone could see what happen clearly.

If the last query is the beginning of the new search query, so we can just filter the last search result and show the filtered list.
Else, call again to the server.

In which case step 7 would become: the first request returns, but does nothing because the text in the input field is no longer “2006″.

And the preview thing on these comments (I assume…) means letters don’t appear for a good 5 seconds after I’ve typed them…rather annoying.