带有自定义滚动条的自动完成 jquery UI 插件 [英] Autocomplete jquery UI plugin with custom scrollbars

问题描述

是否有人尝试为 jquery UI 自动完成小部件制作自定义滚动条?我正在尝试将 jScrollPane jquery 组件与自动完成小部件结合使用，但到目前为止还没有任何成功.如果有人知道一些带有自定义滚动条的 jquery 自动完成组件，或者知道如何更改 jquery ui 自动完成小部件以支持 jscrollpane 组件，我将不胜感激.

解决方案

• 演示: http://so.lucafilosofi.com/autocomplete-jquery-ui-plugin-with-custom-scrollbars

• 更新:22/09/2015 更新到所有最新版本:jquery 1.11.3、jquery-ui 1.11.4、jScrollPane 2.0.22

<代码>....打开:函数(){$('.ui-autocomplete').width($(this).width());如果(未定义！== _jScrollPane){_jScrollPaneAPI.destroy();}$('.ui-autocomplete > li').wrapAll($('<div class="scroll-panel"></div>').width($(this).width()).height(_jSheight));_jScrollPane = $('.scroll-panel').jScrollPane(settings),_jScrollPaneAPI = _jScrollPane.data('jsp');},关闭:函数(事件，用户界面){_jScrollPaneAPI.destroy();_jScrollPane = 未定义；},....

<块引用>

请参阅演示源代码以获得完整的工作代码......谢谢.

did someone try to make custom scrollbars for jquery UI autocomplete widget? I'm trying to use jScrollPane jquery component in combination with autocomplete widget, but so far didn't have any success. If someone knows about some jquery autocomplete component with custom scrollbars, or knows how to change jquery ui autocomplete widget to support jscrollpane component, I would appreciate it.

解决方案

• DEMO: http://so.lucafilosofi.com/autocomplete-jquery-ui-plugin-with-custom-scrollbars

• UPDATED: 22/09/2015 updated to all latest versions: jquery 1.11.3, jquery-ui 1.11.4, jScrollPane 2.0.22

....
open: function() {
  $('.ui-autocomplete').width($(this).width());
  if (undefined !== _jScrollPane) {
    _jScrollPaneAPI.destroy();
  }
  $('.ui-autocomplete > li')
    .wrapAll($('<div class="scroll-panel"></div>')
      .width($(this).width())
      .height(_jSheight));
  _jScrollPane = $('.scroll-panel').jScrollPane(settings),
  _jScrollPaneAPI = _jScrollPane.data('jsp');
},
close: function(event, ui) {
  _jScrollPaneAPI.destroy();
  _jScrollPane = undefined;
},
....

Please refer to the demo source code for full working code... thanks.

这篇关于带有自定义滚动条的自动完成 jquery UI 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！