Ajax.Autocompleter

Craig

unread,

Feb 17, 2009, 5:03:36 AM2/17/09

to Prototype & script.aculo.us

Am having one problem i cannot seem to solve. The autocompleter box
displays the results which has a set height so a scroll bar displays.
In FF but not other browsers when you scroll through the results it
works fine but in any other browser it will just lose focus and
disappear.

Anyone come accross the same problem have a fix? Am using the latest
versions.

david

unread,

Feb 17, 2009, 6:00:18 AM2/17/09

to Prototype & script.aculo.us

Hi craig,

not seems trivial, could we have an example?

--
david

Craig

unread,

Feb 17, 2009, 6:48:32 AM2/17/09

to Prototype & script.aculo.us

Sorry cant get an example online im afraid, should behave this way for
anyone who sets a height for the auto_complete div like so:

div.auto_complete
{
position:absolute;
width: 350px;
max-height:200px;
overflow: auto;
overflow-x: hidden;
background: #fff;
z-index:101;
border:1px solid #888;
}

When clicking on the scroll bar it loses focus and closes the div. I
am currently trying to edit the onBlur function to check if focus is
still on this.update (the div) so i can set it to remain open.

david

unread,

Feb 17, 2009, 7:01:41 AM2/17/09

to Prototype & script.aculo.us

Hi craig,

perhaps stupid remarks, but in FF the scrollbar is contained inb the
element, not in IE.
Couldn't it be something like that ??

Can you send the code for the autocompleter ?? (just it, with
callbacks definition ??

--
david

Craig

unread,

Feb 17, 2009, 8:08:20 AM2/17/09

to Prototype & script.aculo.us

Firefox probabaly ignores clicks on the scroll bar and thus does not
lose focus. Here is the main part of the code

var auto_cust;
var auto_bran;
var auto_call;

new Event.observe(window, 'load', pageload);

function pageload() {
auto_cust = new Ajax.Autocompleter('customer', 'customer_auto',
'logform_customer.asp', {minChars:-1,frequency:0.5,afterUpdateElement:
getCustomerId});
auto_bran = new Ajax.Autocompleter('branch', 'branch_auto',
'logform_branch.asp', {minChars:-1,frequency:0.5,callback:
customerCallback,afterUpdateElement: getBranchId});
auto_call = new Ajax.Autocompleter('caller', 'caller_auto',
'logform_caller.asp', {minChars:-1,frequency:0.5,callback:
customerCallback});

new Event.observe('customer', 'focus', acust);
new Event.observe('branch', 'focus', abran);
new Event.observe('caller', 'focus', acall);
$('customer').focus();
}

function acust()
{
auto_cust.activate(); //twice because IE is clever
auto_cust.activate();
}

function abran()
{
auto_bran.activate(); //twice because IE is clever
auto_bran.activate();
}

function acall()
{
auto_call.activate(); //twice because IE is clever
auto_call.activate();
}

function getBranchId(text, li) {
$('branch_id').value = li.id;
$('caller').focus();
}

function getCustomerId(text, li) {
$('customer_id').value = li.id;
$('branch').value='';
$('branch_id').value='';
$('branch').focus();
}

function customerCallback(element, entry) {
return entry + "&customer=" + $('customer_id').value;

Message has been deleted

Craig

unread,

Feb 17, 2009, 9:41:51 AM2/17/09

to Prototype & script.aculo.us

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-
UK">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link type="text/css" href="CSS/logform.css" rel="stylesheet"
media="screen" />
<script type="text/javascript" src="JS/prototype.js"></script>
<script type="text/javascript" src="JS/effects.js"></script>
<script type="text/javascript" src="JS/controls.js"></script>
<script type="text/javascript" src="JS/datepicker.js"></script>
<script type="text/javascript" src="JS/prototype-date-extensions.js"></
script>
<script type="text/javascript" src="JS/funcs.js"></script>
</head>
<body>
<form id="calllogform" name="calllogform" action="logform.asp?num="
method="post"><label class="first" for="customer"
id="label_customer">Customer<input id="customer" name="customer"
size="20" type="text" value="" tabindex="1" /><div
class="auto_complete" id="customer_auto"></div></label></form>
<script type="text/javascript">

auto_cust = new Ajax.Autocompleter('customer',
'customer_auto', 'logform_customer.asp', {minChars:-1,frequency:
0.5,afterUpdateElement: getCustomerId});

function getCustomerId(text, li) {
//$('customer_id').value = li.id;
//$('branch').value='';
//$('branch_id').value='';
//$('branch').focus();
}
</script></body>
</html>

Sample code there

Craig

unread,

Feb 17, 2009, 10:20:35 AM2/17/09

to Prototype & script.aculo.us

Fixed the problem now by making changes in controls.js

Line 48 this.hasFocus = false;
add below:
this.update.hasFocus = false;

Line91 Event.observe(this.element, 'blur',
this.onBlur.bindAsEventListener(this));
add below:
Event.observe(this.update, 'mouseover',
this.onDivFocus.bindAsEventListener(this));
Event.observe(this.update, 'mouseout',
this.onDivBlur.bindAsEventListener(this));

then also edit function and add 2 new

onBlur: function(event) {
if(this.update.hasFocus == false) {
setTimeout(this.hide.bind(this), 250);
this.hasFocus = false;
this.active = false;
}
},

onDivFocus: function(event) {
this.update.hasFocus = true;
},

onDivBlur: function(event) {
this.update.hasFocus = false;
},

in IE7 it behaves, not tested fully yet. Gets set to true when you are
on the scroll bar so is then unable to close.

Craig

unread,

Feb 18, 2009, 6:43:57 AM2/18/09

to Prototype & script.aculo.us

Also fixed another bug for IE, whenever you click an option instead of
using return/tab it would ignore the afterupdateelement function and
not focus on the next text box but remain in the current one

onClick: function(event) {
var element = Event.findElement(event, 'LI');
this.index = element.autocompleteIndex;
this.selectEntry();
this.hide();
Event.stop(event); <<<<<<<<<<<<< Added
},

Reply all

Reply to author

Forward