Jquery autocomplete causing page to scroll unnecessarily
I've got a frustrating issue with Jquery auto-complete. I have UL of drop down options which appears beneath the input. The ui-menu and ui-menu-items are being rendered with width:1214px - I assume this is document width or something. I don't know why this happens, but I can overwrite the CSS to fix it.
Fixing the width causes line breaks in the result list, which is fine. The limited result list still easily fits on the page but for some reason the page height is thrown off and I get a vertical scroll bar.
All the ul and li heights are set to auto in the DOM explorer- 开发者_JAVA百科why does it cause the page to scroll?
What workarounds are there to keep the autocomplete box inside the lines?
CSS:
.ui-menu {
...
width:245px;
}
.ui-menu-item{
cursor:pointer;
list-style: none;
...
width:245px;
}
JS:
$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
if (index < 10)
{self._renderItem( ul, item );}
});
}
Input:
<input type="text" class="Search" id="search_box"/>
Try to set/overwrite the z-index of the list that drops down on search:
z-index:999 or z-index:1000
I am not sure but it could help. Another solution would be to set the overflow to hidden when user is searching:
So as soon as the user clicks on the input field:
$("html,body").css("overflow","hidden");
And when the input field looses focus:
$("html,body").css("overflow","auto");
However this seems strange to me because jQuery UI should work properly.
I solved this problem using the appendTo initialization option. I think that the problem is that the absolutely position autocomplete menu is still increasing the height of the body: by setting the appendTo option to a div with height: 0px, I was able to eliminate the problem.
Example:
Javascript:
$( ".selector" ).autocomplete({
appendTo: "#hidden-stuff"
});
HTML:
<body>
<input class="selector" type="text>
<div id="hidden-stuff" style="height: 0px;"></div>
</body>
Just place position: fixed into the CSS class ui-autocomplete like this:
.ui-autocomplete
{
position: fixed; /* Prevents page scroll when autosuggestion menu appears */
}
加载中,请稍侯......
精彩评论