带有自定义滚动条的Autocomplete jQuery UI插件

Question

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

- drak

Answer 1

• 演示: 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

....
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;
},
....

请参考演示源代码获取完整的工作代码...谢谢。

- Luca Filosofi

---

我已经更新了演示，现在没有时间，但是通过一些CSS调整和少量的JS，它应该是完美的。让我知道。 - Luca Filosofi

@aSeptik，非常感谢您的代码分享。但我认为有一个小错误，即使用上下箭头键时，滚动条不会自动滚动。有人有解决方法吗？非常感谢您提前的帮助。 - Phantom007

这在我的情况下不起作用。列表没有显示。 - Chirag Sutariya

@Chirag Sutariya 尊敬的Chirag，仅仅说"不起作用"是不够的，您应该提供一些信息以便得到更好的帮助。因此，下次请不要只投反对票，而是提供一些信息。谢谢。 PS：我意外地点了赞！;-) - Luca Filosofi

@Chirag Sutariya，我已经更新了代码到最新版本，请尝试查看是否现在也适用于您... - Luca Filosofi