javascript jquery 自动完成使 mCustomScrollbar 在选择时滚动到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12935117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery autocomplete makes mCustomScrollbar scroll to top on select
提问by aztuk
I have implemented the mCustomScrollbar plugin in my backoffice interfaces. It works fine. But in one of my forms, I have a city field that needs the autocomplete.
我已经在我的后台界面中实现了 mCustomScrollbar 插件。它工作正常。但在我的一种表格中，我有一个需要自动完成的城市字段。
The autocomplete also works fine. But when I select one of the item from autocomplete source data, the mCustomScrollbar plugin automatically brings me to the top of the scrolling content and I have to click a second time for the item to actually be selected.
自动完成也可以正常工作。但是当我从自动完成源数据中选择一个项目时，mCustomScrollbar 插件会自动将我带到滚动内容的顶部，我必须再次单击才能实际选择该项目。
This is how I implemented the scrollbar plugin :
这就是我实现滚动条插件的方式：
$('#mainContent').mCustomScrollbar({
set_height: height,
scrollInertia: 500,
scrollEasing: "easeInOutQuad",
mouseWheel: 20,
autoDraggerLength: true,
advanced: {
updateOnBrowserResize: true,
updateOnContentResize: false
}
});
And this is how I implemented the autocomplete :
这就是我实现自动完成的方式：
el.autocomplete({
source: function (request, response) {
$.ajax({
url: activityAutocomplete,
dataType: "json",
data: request,
success: function (data) {
if (data.length == 0) {
data.push({
label: "Pas de résultat"
});
}
response(data);
}
});
},
//If overflow edge of window, the autocomplete flips to top of input
position: { collision: "flip" },
autofocus: true,
delay: 150,
minLength: 1,
select: function (event, ui) {
//ui.hide();
//The following code resizes the input by bluring it.
setTimeout(function () { el.autoGrowInput(); }, 50);
},
appendTo: '#autocomplete-tb-city-' + el.parents('.item').attr('id')
});
I hope you'll find something wrong here, i've been working on this for like 3 days !
我希望你能在这里发现一些问题，我已经研究了 3 天了！
EDIT: This is the generated autocomplete markup.
编辑：这是生成的自动完成标记。
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem">
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Angers</a</li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Amiens</a</li>
</ul>
I must add something might be importante : it brings me to top even on RIGHT CLICK !!
我必须添加一些可能很重要的东西：它使我即使在右键单击时也能达到顶峰！！
Thank you.
谢谢你。
采纳答案by varunvlalan
I was facing the same issue with autocomplete. Selecting any autocomplete items scrolls the window to the top.
我在自动完成方面遇到了同样的问题。选择任何自动完成项目会将窗口滚动到顶部。
I saw your comment here, and I think you got the solution.
我在这里看到了您的评论，我认为您已经找到了解决方案。
Using hint you mentioned in the above link, I went through mcustomscrollbar.js code and just commented out lines 533 and 534 and yeppy it worked for me.
使用你在上面链接中提到的提示，我浏览了 mcustomscrollbar.js 代码，只是注释掉了第 533 和 534 行，是的，它对我有用。
Thanks for the hint. Cheers !!
谢谢你的提示。干杯！！
回答by pro
A new version of custom scrollbarshave an advanced option autoScrollOnFocus.
新版本的自定义scrollbars有一个高级选项autoScrollOnFocus。
Example:
例子：
$($element).find('> .scrollbars').mCustomScrollbar({
horizontalScroll: false,
autoDraggerLength: true,
autoHideScrollbar: true,
advanced:{
autoScrollOnFocus: false,
updateOnContentResize: true,
updateOnBrowserResize: true
}
});
回答by zeddotes
might be an anchor-related problem? what is the href on the generated items for auto-complete? it would be helpful if you can provide the html markup of the generated auto-complete.
可能是锚相关的问题？自动完成生成的项目的 href 是什么？如果您可以提供生成的自动完成的 html 标记，那将会很有帮助。
maybe try adding this (not tested)...
也许尝试添加这个（未测试）...
$( [auto-complete suggestions] ).live("click", function(e){
e.preventDefault();
});
回答by Dushyant Gadhiya
I faced similar issue. The issue was on first time item selection it was focusing on autocomplete input element, so what i did was just focus on autocomplete input element on success of ajax and it solved my problem.
我遇到了类似的问题。问题出在第一次选择项目时，它专注于自动完成输入元素，所以我所做的只是专注于 ajax 成功的自动完成输入元素，它解决了我的问题。
$('#'+id of input element).focus();
$('#'+id of input element).focus();
