Autocompleter should support scrolling in update div

Example test case and detailed description

Hi This is actually easy to achieve with some coordinate calculation of the click. Here is my working solution :

onBlur: function(event) {

// needed to make click events working //Because of scrollbar, dont hide the div when "blur" happens when the user on //"div" clicks if((event.x - parseInt(this.update.style.left)) > parseInt(this.update.style.width) | (event.y - parseInt(this.update.style.top)) > parseInt(this.update.style.height)) {

setTimeout(this.hide.bind(this), 250); this.hasFocus = false; this.active = false;

}

}

Hope this helps..

gulceg DOT yahoo DOT com

I've testet that fix and it works. However if you use the the keyboard to move around in the list the view is not updated inside the div. Can clipping be used, and if so, how?

tommy dot skaue at gmail com

Thanks for the updated onBlur() function, looks like we are onto the right track.

In addition to tommy's bug above, it is now more difficult to cancel the popup list without making a selection, the only method that works now is to press escape. Previously you could click on the webpage (i.e. not on the popup) and the popup would disappear without a selection being made.

The problem with this fix is that Opera and Firefox do NOT send a mouse event back for onBlur event - i.e. event.x and event.y are undefined thus as mentioned in the upper post - the autoupdated disappears only with esc pressed. I will try to look deeper into the event to make it work in opera (it seems that it reports the least values for that event).

The keyboard fix (for tommy)

I'd like a scrollable list of items that works with an AJAX fetch of additional items as the user scrolls to expose them. Same would apply to hierarchical items.

I've made an even simpler solution for a scrolling item list that responds to up and down arrow keys. No coordinate calculation necessary, everything is done with the DOM. (Using script.aculo.us 1.6.1 and prototype 1.5.0_rc0, tested in Firefox 1.5.0.4 and Internet Explorer 6 SP2 -- other tests welcome.)

JavaScript:

function scrollAutocompleter(e) {
	if (!document.getElementById("autocomplete_choices").firstChild) return;

	if !e var e = window.event;
	var keyID = e.keyCode;

	if (keyID != 38 && keyID != 40) return;
	returnedList = document.getElementById("autocomplete_choices").firstChild;

	for (var i = 0; i < returnedList.childNodes.length; i++) {
		returnedList.scrollTop = i * Element.getHeight(returnedList.childNodes[i]);
		if (returnedList.childNodes[i].className == "selected") return;
	}
}

In your window.onload event handler (first line is from script.aculo.us docs):

new Ajax.Autocompleter('autocomplete', 'autocomplete_choices', '/url/on/server', {});
Event.observe('autocomplete', 'keyup', scrollAutocompleter);

And the HTML (also just from the docs):

<input type="text" id="autocomplete" name="autocomplete_parameter"/><div id="autocomplete_choices" class="autocomplete"></div>

I think I have a solution to the Firefox/Opera problem hello mentioned above, by slightly modifying Guvenc's onBlur replacement. If a browser isn't giving us the click coordinates, let it go through the blur anyway. Here's the new code:

if(
	(event.x == undefined) |
	(event.x - parseInt(this.update.style.left)) > parseInt(this.update.style.width) |
	(event.y - parseInt(this.update.style.top)) > parseInt(this.update.style.height)
) {
	setTimeout(this.hide.bind(this), 250);
    this.hasFocus = false;
    this.active = false;
	}

If this works for everyone, the next step is to put together a patch for scrollable autocompleters that combines the keyboard up/down code with the blur fix. OK?

Oops, seems the work is happening in ticket #4782. Let's consolidate all the autocompleter scrolling stuff there?