I found the solution for this problem... In case someone is experiencing the same problem, check the solution in this website: http://blog.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/
Hope this helps! In case the site is not working anymore for some weird reason, I quote (copy/paste) the post from the blog: ==== Quote frrom http://blog.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/ ==== Scriptaculous Autocomplete Page Jump Using Arrow Keys Tags: CSS, JavaScript, Scriptaculous When you use overflow:auto in your css in conjunction with Scriptaculous’ Autocomplete, there is a bug that makes the entire page jump around when you use the arrow keys on your keyboard to navigate up and down through the suggestion list. This bug normally appears only when the page itself is long enough to require a scroll bar. I managed to come up with a very clean working solution by hacking the controls.js file that comes with scriptaculous. The solutions requires replacing the markPrevious and markNext functions and adding a small line of code to the updateChoices function. Currently, markPrevious and markNext are telling the page to jump around like that, and I’m not sure why! As far as I can tell (please let me know otherwise) this solution could be included in the scriptaculous without breaking a thing (hint, hint to the scriptaculous team). To implement the solution, replace: markPrevious: function() { if(this.index > 0) this.index--; else this.index = this.entryCount-1; this.getEntry(this.index).scrollIntoView(true); }, markNext: function() { if(this.index < this.entryCount-1) this.index++; else this.index = 0; this.getEntry(this.index).scrollIntoView(false); }, With: 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; } }, 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; } }, Now find the updateChoices function and just after the code this.stopIndicator(); add this.update.scrollTop = 0; so that it looks like this: this.stopIndicator(); this.update.scrollTop = 0; this.index = 0; I've tested in FF 2.0.0.4, FF 3.0.5, Chrome 1.0.154.43, Safari 3.2.1, Opera 9.5.1, IE 7.0.5730.13 and IE 6.0.2600 without problems. ==== Quote frrom http://blog.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/ ==== On Jul 10, 5:59 pm, Jorgepedret <[email protected]> wrote: > I have the same issue :( did anybody find a solution for this? I can't > seem to find a discussion about this anywhere else... > > On Jun 23, 4:41 am, Adriano Varoli Piazza <[email protected]> wrote: > > > Using the ajax helper to provide an 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 > > resultant list is provided by, e.g.: > > <ul> > > <?php foreach($peoples as $person): ?> > > <li><?php echo $person['Person']['id']; ?></li> > > <?php endforeach; ?> > > </ul> > > > (Just an example, I actually show the id, the 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; > > > } > > > -- > > Best regards, > > Adriano > > Adriania:http://adriania.blogspot.com --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "CakePHP" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/cake-php?hl=en -~----------~----~----~----~------~----~------~--~---
