Opened 11 years ago
Last modified 11 years ago
#8875 closed bug
Autocomplete vertical scroll-to-top bug — at Initial Version
Reported by: | jjtroberts | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.10.0 |
Component: | ui.autocomplete | Version: | 1.9.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Under 1.9.2 CSS, when the number of results from autocomplete exceeds max-height AND the user scrolls down the result list, whenever the mouse hovers over a result item the result list jumps back to the top making it impossible to scroll down and select an item from the list.
I removed jquery-ui-1.9.2.custom.min.css and replaced it with jquery-ui-1.8.23.custom.css and the problem went away.
Pertinent code is below:
$('#search').autocomplete({ source: "<?php echo Router::url(array('controller' => 'Residents','action' => 'Search')); ?>", minLength: 2, select: function( event, ui ) { var ResidentControllers = new Array( "Residents","Accounts","EmergencyContacts","Notifications","TransportationPasses" ); var controller = "<?php echo $this->name; ?>"; var action = "<?php echo $this->action; ?>"; if(ResidentControllers.indexOf(controller) != -1){ location.href="<?php echo Router::url(array('controller' => '"+controller+"','action' => '"+action+"')); ?>/"+ui.item.value; }else{ location.href="<?php echo Router::url(array('controller' => 'Residents','action' => 'Edit')); ?>/"+ui.item.value; } return false; }, open: function(){ $(this).autocomplete('widget').css('z-index', 9999999999999999); return false; } }).data("autocomplete")._renderItem = function(ul, item){ if(item.value){ var imageUrl = "<?php echo $this->Html->webroot('img/residents/'); ?>"; return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a class=\"uiasearchitem\" style=\"float:left;\">"+ "<div style=\"float:left;\">"+ "<img class=\"avatar\" width=\"80px\" height=\"60px\" src=\""+imageUrl+item.filename+"\" />"+ "</div>"+ "<div class=\"username\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.name+"</div>"+ "<div class=\"laststay\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.last_stay+"</div>"+ "<div class=\"bars\" style=\"font-size:10px;float:left;clear:right;width:240px;\">No Bars</div>"+ "</a>" ).appendTo( ul ); }else{ return $( "<li></li>" ) .data( "item.autocomplete", item ) .append(item.message) .appendTo( ul ); } };
Note: See
TracTickets for help on using
tickets.