jQuery的自动完成功能使得mCustomScrollbar滚动到选择

顶部我在后台接口实现的mCustomScrollbar插件。它工作正常。但在我的一种形式中，我有一个需要自动完成的城市字段。jQuery的自动完成功能使得mCustomScrollbar滚动到选择

自动完成也可以正常工作。但是，当我从自动完成源数据中选择一个项目时，mCustomScrollbar插件会自动将我带到滚动内容的顶部，并且必须再次点击才能真正选择项目。

我这是怎么实现的滚动条插件：

$('#mainContent').mCustomScrollbar({ 
     set_height: height, 
     scrollInertia: 500, 
     scrollEasing: "easeInOutQuad", 
     mouseWheel: 20, 
     autoDraggerLength: true, 
     advanced: { 
      updateOnBrowserResize: true, 
      updateOnContentResize: false 
     } 
    });

这是我如何实现自动完成：

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') 
});

我希望你错在这里找到的东西，我一直为此工作了3天！

编辑：这是所生成的自动完成标记。

<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>

我要补充的东西可能是重要提示：它带给我顶部甚至在右边点击！

谢谢。

来源

2012-10-17 aztuk

我面临同样的问题与自动完成。选择任何自动完成项目会将窗口滚动到顶部。

我看到您的评论here，我觉得你得到了解决。

使用您在上面的链接提到的提示，我通过mcustomscrollbar.js代码去了，只是注释掉线533和534，并yeppy它为我工作。

感谢您的提示。干杯！

来源

2012-10-18 07:19:21 varunvlalan

是的，它也适用于我:)。 – aztuk

这很好，很酷:) – varunvlalan

可能是锚相关的问题？自动完成生成项目的href是什么？如果您可以提供生成的自动完成的html标记将会很有帮助。

也许尝试加入此（未测试）...

$([auto-complete suggestions]).live("click", function(e){ 
e.preventDefault(); 
});

来源

2012-10-17 13:19:07 zeddotes

我试过了，项目的选择不再起作用，它仍然带给我到顶部。 – aztuk

你可以上传问题的地方我们可以检查？ – zeddotes

我在本地网络上工作，如何上传？我试图让它在jsFiddle上工作，但由于Mime类型，插件甚至没有工作... – aztuk

定制scrollbars的新版本有一个高级选项autoScrollOnFocus。

例子：

 $($element).find('> .scrollbars').mCustomScrollbar({ 
      horizontalScroll: false, 
      autoDraggerLength: true, 
      autoHideScrollbar: true, 
      advanced:{ 
       autoScrollOnFocus: false, 
       updateOnContentResize: true, 
       updateOnBrowserResize: true 
      } 
     });

来源

2013-04-12 13:15:48 pro

设置'autoScrollOnFocus：false'解决了这个插件字段焦点错误的问题。 –

jQuery的自动完成功能使得mCustomScrollbar滚动到选择

回答

相关问题