4

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.

drak
  • 43
  • 1
  • 3

1 Answers1

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

Luca Filosofi
  • 30,905
  • 9
  • 70
  • 77
  • i have updated the demo, i have no time now, but with some css adjustment and a little bit of js it shold be perfect. let me know. – Luca Filosofi Mar 16 '11 at 17:08
  • Nice demo - would be even better if it used the new version of jScrollPane (that old version is no longer supported): http://jscrollpane.kelvinluck.com/ – vitch Mar 16 '11 at 17:33
  • Looks nice. I will try to do the same with new version of jscrollpane – drak Mar 16 '11 at 17:42
  • @vitch thanks for the hint, @drak i have updated one more time now it work just fine ;) look into the source code. – Luca Filosofi Mar 16 '11 at 18:38
  • Nice one. I had a look and it still seems to be using the old jScrollPane ( http://ask.altervista.org/demo/autocomplete-jquery-ui-plugin-with-custom-scrollbars/jScrollPane.js vs http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js ) though? – vitch Mar 17 '11 at 09:06
  • When I click the scroll bar in IE8 running in compatibility mode in your example, the autocomplete disappears from view rather than letting me drag the scroll bar. – Mark Schultheiss Jul 15 '11 at 20:41
  • 5
    @aSeptik, Many many thanks for sharing the code sir. But I think there is a small bug i.e. when you use your UP / DOWN keys, the scrollers does not auto scroll. Does anyone have a solution for this? Thanks so much in advance for your help . – Phantom007 Sep 17 '11 at 04:54
  • In this demo scrollbar is not move on down arrow key. Can you suggest how we can move it.. – Dheeraj Jul 21 '14 at 06:50
  • 1
    This is not working in my case. List is not displaying. – Chirag Sutariya Sep 21 '15 at 13:28
  • @Chirag Sutariya Dear Chirag, Just sayinng that does not work for You, is not enough, you should give some info in order to get some help... so instead of voting down provide some info next time, thanks. PS: accidentally i have voted your comment up! ;-) – Luca Filosofi Sep 22 '15 at 08:30
  • @Chirag Sutariya i have updated the code to the latest relase, try to see if now work also for you... – Luca Filosofi Sep 22 '15 at 18:58