More work on auto-completion - it auto-scrolls now and limits result divs to 300px height
--- a/includes/clientside/static/autofill.js Sat Aug 23 16:03:13 2008 -0400
+++ b/includes/clientside/static/autofill.js Sat Aug 23 16:03:32 2008 -0400
@@ -152,6 +152,7 @@
// Create results
var results = document.createElement("div");
$(results).addClass('tblholder').css('z-index', getHighestZ() + 1).css('margin-top', 0);
+ $(results).css('clip', 'rect(0px,auto,auto,0px)').css('overflow', 'auto').css('max-height', '300px');
// Create jQuery object for results
// var $results = $(results);
@@ -241,7 +242,8 @@
case 13: // return
if( selectCurrent() ){
// make sure to blur off the current field
- $input.get(0).blur();
+ // (Enano edit - why do we want this, again?)
+ // $input.get(0).blur();
e.preventDefault();
}
break;
@@ -297,6 +299,33 @@
lis.removeClass("row2");
$(lis[active]).addClass("row2");
+
+ // scroll the results div
+ // are we going up or down?
+ var td_top = $dynano(lis[active]).Top() - $dynano(results).Top();
+ var td_height = $dynano(lis[active]).Height();
+ var td_bottom = td_top + td_height;
+ var visibleTopBoundary = getScrollOffset(results);
+ var results_height = $dynano(results).Height();
+ var visibleBottomBoundary = visibleTopBoundary + results_height;
+ var scrollTo = false;
+ console.debug('td top = %d, td height = %d, td bottom = %d, visibleTopBoundary = %d, results_height = %d, visibleBottomBoundary = %d, step = %d',
+ td_top, td_height, td_bottom, visibleTopBoundary, results_height, visibleBottomBoundary, step);
+ if ( td_top < visibleTopBoundary && step < 0 )
+ {
+ // going up: scroll the results div to just higher than the result we're trying to see
+ scrollTo = td_top - 7;
+ }
+ else if ( td_bottom > visibleBottomBoundary && step > 0 )
+ {
+ // going down is a little harder, we want the result to be at the bottom
+ scrollTo = td_top - results_height + td_height + 7;
+ }
+ if ( scrollTo )
+ {
+ console.debug('scrolling the results div to %d', scrollTo);
+ results.scrollTop = scrollTo;
+ }
// Weird behaviour in IE
// if (lis[active] && lis[active].scrollIntoView) {
@@ -485,8 +514,6 @@
var row = data[i];
if (!row) continue;
- console.debug('row good ', row);
-
if ( typeof(row[0]) != 'string' )
{
// last ditch resort if it's a 1.1.4 autocomplete plugin that doesn't provide an automatic result.
--- a/includes/clientside/static/functions.js Sat Aug 23 16:03:13 2008 -0400
+++ b/includes/clientside/static/functions.js Sat Aug 23 16:03:32 2008 -0400
@@ -452,10 +452,16 @@
object.filter = "alpha(opacity=" + opacity + ")";
}
-function getScrollOffset()
+function getScrollOffset(el)
{
var position;
- if (self.pageYOffset)
+ var s = el || self;
+ el = el || document;
+ if ( el.scrollTop )
+ {
+ position = el.scrollTop;
+ }
+ else if (s.pageYOffset)
{
position = self.pageYOffset;
}
--- a/includes/template.php Sat Aug 23 16:03:13 2008 -0400
+++ b/includes/template.php Sat Aug 23 16:03:32 2008 -0400
@@ -1947,7 +1947,7 @@
function username_field($name, $value = false)
{
$randomid = md5( time() . microtime() . mt_rand() );
- $text = '<input name="'.$name.'" class="autofill username" type="text" size="30" id="userfield_'.$randomid.'" autocomplete="off"';
+ $text = '<input name="'.$name.'" class="autofill username" onkeyup="new AutofillUsername(this);" type="text" size="30" id="userfield_'.$randomid.'" autocomplete="off"';
if($value) $text .= ' value="'.$value.'"';
$text .= ' />';
return $text;
@@ -1962,7 +1962,7 @@
function pagename_field($name, $value = false)
{
$randomid = md5( time() . microtime() . mt_rand() );
- $text = '<input name="'.$name.'" class="autofill page" type="text" size="30" id="pagefield_'.$randomid.'" autocomplete="off"';
+ $text = '<input name="'.$name.'" class="autofill page" onkeyup="new AutofillPage(this);" type="text" size="30" id="pagefield_'.$randomid.'" autocomplete="off"';
if($value) $text .= ' value="'.$value.'"';
$text .= ' />';
return $text;