More work on auto-completion - it auto-scrolls now and limits result divs to 300px height
authorDan
Sat, 23 Aug 2008 16:03:32 -0400
changeset 704 077887be639d
parent 703 e492511e31ea
child 705 85943d71c214
child 709 a5917b034435
More work on auto-completion - it auto-scrolls now and limits result divs to 300px height
includes/clientside/static/autofill.js
includes/clientside/static/functions.js
includes/template.php
--- 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;