Scroll issues with Script.aculo.us / CakePHP autocomplete result list

Question

Using the Ajax helper for CakePHP (currently 1.2.3.8166) to provide an $ajax->autoComplete list of results, and giving a result list back as the rendered view, if you use the mouse (and even the mouse wheel) to scroll results, all is well. Using the arrow keys, on the other hand, has the nasty effect of awkwardly scrolling the view: if I press down, the select box and the whole page move to the bottom of the browser's view pane; pressing up has the opposite effect of moving it to the top.

Has anyone else noticed this behaviour, and thought of something? the resulting list is provided by, e.g., this code (this gets $people from the autoComplete() function in the controller):

<ul>
<?php foreach($people as $person): ?>
<li><?php echo $person['Person']['id']; ?></li>
<?php endforeach; ?>
</ul>

(Just an example, I actually show the id and name / surname / commercial name).

The CSS for the list is as follows:

div.auto_complete {
    position: absolute;
    width: 250px;
    background-color: white;
    border: 1px solid #888;
    margin: 0px; padding: 0px;
}
div.auto_complete ul{
    list-style: none;
    margin: 0px;
}

Answer 1

I received the answer to this problem on the cake-php newsgroup (available on http://groups.google.com/group/cake-php ). The poster pointed to this page with the solution, and I copy it here:

1. Open the controls.js file (should be in app/webroot/js)

2. Search for the markPrevious function and change it to:

   markPrevious: function() {
       if (this.index > 0) {
           this.index--;
       } else {
           this.index = this.entryCount-1;
           this.update.scrollTop = this.update.scrollHeight;
       }
       selection = this.getEntry(this.index);
       selection_top = selection.offsetTop;
       if (selection_top < this.update.scrollTop) {
           this.update.scrollTop = this.update.scrollTop-
           selection.offsetHeight;
       }
   },
   

3. Search the markNext function and change it to:

   markNext: function() {
       if(this.index < this.entryCount-1) {
           this.index++;
       } else {
           this.index = 0;
           this.update.scrollTop = 0;
       }
       selection = this.getEntry(this.index);
       selection_bottom = selection.offsetTop+selection.offsetHeight;
       if(selection_bottom > this.update.scrollTop+this.update.offsetHeight) {
           this.update.scrollTop = this.update.scrollTop + selection.offsetHeight;
       }
     },
   

4. Search for the updateChoices function and change lines

   this.stopIndicator();
   this.index = 0;
   

   to

   this.stopIndicator();
   this.update.scrollTop = 0;
   this.index = 0;
   

5. Finally, try the behavior. If it doesn't work at first, try deleting the cache files in app/tmp/cache (or clear your favorite server-side cache), your browser cache, and try again. Clearing app/tmp/cache worked for me.

Answer 2

I am having a similar probelm, I have a text box for autocomplete,and below it a different select box. The drop down of teh autocomplete is generated and is shown above the select box. But as i scroll down the drop down list using keyboard key, the drop down element gets hidden behind the select box. This only happens with IE and only when the drop down has a scroll bar, else it works fine.

any workdone?