1- To avoid having an empty drop down box appear when I return an empty set of matches, I return the word ‘hide’ and then I test for this word in the script. On line 481 in version 1.2, you can add an extra line that tests to see if the word ‘hide’ has been returned as the matching text. If it has, the function returns right away instead of displaying the drop down. You should be able to replicate this with returning xml or json instead of text, and you should be able to use any other word aside from hide.
…
/**
* Parses the TEXT result, adds options
* @param {String} text The text response to parse
*/
_parseText: function(text)
{
//custom changes to script
// don’t display an empty dropdown; just return if the word ‘hide’ is returned by the ajax request
if(text===’hide’){return;}
//end changes
var suggestions = (text||”").split(/\n/);
for(i = 0; i < suggestions.length; i++)
this._addOption(suggestions[i]);
},
…

2 – Wanting the behavior where pressing the backspace or delete keys don't cause the drop down list of suggestions to disappear, I commented that in lines 331 to line 335, in the _suggest function.
It looks like this now:
…
switch(key)
{
case Event.KEY_LEFT:
case Event.KEY_RIGHT:
return false;
break;
case Event.KEY_TAB:
//case Event.KEY_BACKSPACE:
//case 46: //Delete
// this.cancel();
// return false;
// break;
case Event.KEY_RETURN:
if(this.visible)
…

I hope this is helpful to someone.
Thanks for the script!

If it’s easier, feel free to email me at the address I used for this comment.

Thanks!

document.body.appendChild(this.selector);
this.input.autocomplete = 'off';
this.drawn = true;
},



/**
* Repositions the selector (if visible) to match the new
* coords of the input.
* @private
*/
_reposition: function()
{
if(!this.drawn) return;
var pos = this.input.viewportOffset();
var pos_scroll = this.input.cumulativeScrollOffset()
Element.setStyle(this.selector,{
left: (pos.left + pos_scroll.left ) + 'px',
top: (pos.top + pos_scroll.top + this.input_layout.get('border-box-height')) + 'px'
});
},


No matter what, when hitting tab, it never placed the highlighted selection into the input box. Maybe this last thing I mentioned was intended.

Anyway, because of the behavior, it is quite annoying and the best fix I could come up with was making the tab key behave like the enter key.


From 742bd90a8f27df25338c1552fc2bd5ba80abce09 Mon Sep 17 00:00:00 2001
From: x
Date: Thu, 11 Mar 2010 13:55:09 -0500
Subject: [PATCH] Make tab key behave like return/enter key in autocomplete lib

diff --git a/js/lib/autocomplete.js b/js/lib/autocomplete.js
index 223ec02..99c8418 100644
--- a/js/lib/autocomplete.js
b/js/lib/autocomplete.js
@@ -328,6 328,13 @@ var AutoComplete = Class.create({
return false;
break;
case Event.KEY_TAB:
if(this.visible)
{
this.select();
return true;
}
return false;
break;
case Event.KEY_BACKSPACE:
case 46: //Delete
this.cancel();
--
1.6.3.3


I too had the same issue…..looking through prototype’s documentation, there is a viewportOffset() function which seems to provide the answer……
So I changed the _reposition function to this
_reposition: function()
{
if(!this.drawn) return;
var pos = this.input.viewportOffset() ;
//Position.cumulativeOffset(this.input);
pos.push(pos[0] this.input.offsetWidth);
pos.push(pos[1] this.input.offsetHeight);
Element.setStyle(this.selector,{
left: pos[0] ‘px’,
top: pos[3] ‘px’
});
}

and this now makes it position the dropdown below the field, regardless of where the div is scrolled to….